:root {
  --color-primary: #ffd700;
  --color-secondary: #4682b4;
  --color-tertiary: #333;
  --color-accent: #ff3400;
  --color-text: white;
  --color-transparent: rgba(70, 130, 180, 0.5);
  --border-radius: 5px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Typography*/
body {
  background-color: var(--color-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1,
h2 {
  color: var(--color-secondary);
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.5px;
  font-weight: 300;
  line-height: 1.1;
}

h2 {
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.8rem;
}

p {
  margin-top: 0;
}

a {
  color: none;
  text-decoration: none;
}

.techne a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  color: none;
}

.lead {
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 300;
  color: var(--color-tertiary);
}

.lead__color {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: normal;
  color: var(--color-secondary);
}

.hire h3 {
  color: var(--color-secondary);
  padding: 0;
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.5px;
  font-weight: 300;
  line-height: 1.1;
}

.hire h4 {
  color: var(--color-secondary);
  padding: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  font-weight: 400;
  line-height: 1.1;
}

.hire p {
  margin-bottom: 1rem;
  color: #677788;
}

.legdesc p {
  font-size: 0.8rem;
  color: #677788;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 3.5rem;
    font-weight: 400;
  }

  h2 {
    font-size: 4.5rem;
    font-weight: 400;
  }

  .hire h3 {
    font-size: 2rem;
    font-weight: 400;
  }

  .lead {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.3;
  }

  .lead__color {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.3;
  }
}

/* Links */

/* Icons */
.icon {
  font-size: 0.5rem;
  padding-top: 1rem;
}
.icon__hire {
  font-size: 1rem;
  color: var(--color-secondary);
  padding-top: 1.5rem;
}

.icon--secondary {
  color: var(--color-secondary);
}

.icon--green {
  color: green;
}

.icon__atl {
  color: green;
  font-size: 1rem;
  padding-left: 1rem;
}

.icon--nav {
  color: var(--color-secondary);
  margin-top: 1rem;
  margin-right: 0.5rem;
  margin-bottom: 0.6rem;
  /*border: 1px solid var(--color-secondary);*/
  border-radius: 0.225rem;
  padding: 0.5rem;
}

.icon--accent {
  color: var(--color-accent);
}

.icon i {
  font-size: 1.5rem;
}

/*@media screen and (min-width: 1024px) {
  .icon {
    font-size: 4rem;
  }
}*/

/* Lists */
.list {
  list-style: none;
  padding-left: 0;
  color: var(--color-tertiary);
}

.list--inline .list__item {
  display: inline-block;
  margin-right: 2rem;
}

.list--tick {
  padding-left: 2rem;
}

.list--tick .list__item {
  padding-left: 0.5rem;
  position: relative;
  margin-bottom: 0.5rem;
  clear: both;
}

.list__item i {
  float: left;
  padding-right: 0.8rem;
  padding-top: 0.35rem;
  font-size: 0.8rem;
}

@media screen and (min-width: 1024px) {
  .list__item i {
    padding-right: 0.5rem;
  }
}


/* Buttons */
.btn {
  border-radius: var(--border-radius);
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin: 0.05rem 0;
  padding: 0.4rem 2rem;
  text-align: center;
  white-space: nowrap;
}

.btn__file {
  margin: 0.2rem 0;
}

.btn--table {
  margin: 0;
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-transparent);
  color: var(--color-text);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-secondary);
  border: 2px var(--color-secondary) solid;
  transition: color 0.3s;
}

.btn--primary:hover {
  background: var(--color-transparent);
  color: var(--color-text);
}

.btn--delete {
  background: transparent;
  color: var(--color-secondary);
  border: 2px var(--color-secondary) solid;
  transition: color 0.3s;
}

.btn--delete:hover {
  background: var(--color-accent);
  color: var(--color-text);
}

.btn--outline {
  background: transparent;
  border: 2px var(--color-secondary) solid;
  color: var(--color-secondary);
  transition: color 0.3s;
}

.btn--outline:hover {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--block {
  width: 100%;
  display: inline-block;
}

.btn--nav {
  text-align: left;
  padding: 0.4rem 0.5rem;
}


/* Inputs */
.input {
  border-radius: var(--border-radius);
  border: 1px solid #ccc;
  line-height: 0.8rem;
  outline: 0;
  padding: 0.3rem;
  width: 100%;
  margin: 0.2rem 0 0.5rem;
}

.input__text {
  height: 5rem;
}

.input__table {
  margin: 0.2rem 0;
}

/* Cards */
.card {
  background-color: var(--color-text);
  color: var(--color-tertiary);
  border-radius: 0.625rem;
  box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.2);
  padding: 0.9375rem;
  margin: 0.625rem;
}

.card__yellow {
  background-color: var(--color-primary);
  color: var(--color-tertiary);
  border-radius: 0.625rem;
  box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.2);
  padding: 0.9375rem;
  margin: 0.625rem;
}

.card__form {
  background-color: var(--color-primary);
  border-radius: 0;
  box-shadow: none;
}

.card__hire {
  background-color: var(--color-primary);
}

.card__green {
  background-color: #eefcf5;
}

.card__orange {
  background-color: #fcf5ee;
}

.card__background {
  background-color: #e6ffe6;
}

.card__red {
  background-color: #f9dedd;
}

.card__alt {
  min-width: 0;
  min-height: 0;
}

/*.card canvas {
  width: 100% !important;
  height: 100% !important;
}*/

.terms .card {
  color: #999;
  height: 70vh;
  overflow-y: scroll;
}

/* General */
.container {
  max-width: 100%;
  margin: 0 auto;
  overflow: auto;
  padding: 0;
}

.container__adjust {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  overflow: auto;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.centering {
  text-align: center;
}

/* Logo */
.logo {
  width: 100%;
  padding-top: 4rem;
}

.inside .logo {
  padding-top: 1.5rem;
}

.logo--nav {
  padding-top: 1rem;
}

.logo--space {
  padding-top: 4rem;
}

@media screen and (min-width: 768px) {
  .logo {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
  }

  .logo--nav {
    padding-top: 1rem;
    width: 20%;
  }

  .logo__container {
    justify-content: center;
  }

  .inside .logo {
    width: 90%;
    padding-top: 2rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .logo--space {
    padding-top: 5rem;
  }
}

.logosm {
  width: 95%;
  padding-top: 3.5rem;
}

@media screen and (min-width: 768px) {
  .logosm {
    width: 25%;
    padding-top: 2.5rem;
  }

  .logosm__container {
    justify-content: center;
  }
}

.logotiny {
  width: 10%;
  padding-top: 1.5rem;
}

@media screen and (min-width: 768px) {
  .logotiny {
    width: 10%;
    padding-top: 1.5rem;
  }

  .logotiny__container {
    justify-content: center;
  }
}

/* Services */
.services .flex {
  flex-wrap: wrap;
}

.services h3 {
  margin-bottom: 0;
  margin-top: 0.2rem;
  font-size: 1.2rem;
  color: var(--color-tertiary);
  font-weight: 400;
}

.services .index {
  text-align: center;
  margin: 1.125rem 0.625rem 0.625rem;
  transition: transform 0.2s ease-in;
}

.services .index:hover {
  transform: translateY(-0.8rem);
}

.services .index h3 {
  font-size: 1rem;
  margin-top: 0.33em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/*
.services .card {
  text-align: center;
  margin: 1.125rem 0.625rem 0.625rem;
  transition: transform 0.2s ease-in;
}

.services .card:hover {
  transform: translateY(-0.8rem);
}

.services .card h4 {
  font-size: 0.8rem;
  margin-top: 0.33em;
  margin-bottom: 0.5rem;
  font-weight: 400;
}*/

@media screen and (min-width: 768px) {
  .services h3 {
    margin-bottom: 0;
    margin-top: 0.2rem;
    font-size: 1.5rem;
    font-weight: 400;
  }
}

/* Footer */
.footer p {
  color: var(--color-secondary);
  padding: 0 0.5rem;
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .footer {
    margin-bottom: 1rem;
  }
}

.upspace {
  padding-top: 3rem;
}

/* Forms - registration */
.interaction .container {
  width: 80%;
  border: none;
}

.container .terms {
  width: 80%;
  height: 70vh;
  font-size: 80%;
  overflow: auto;
}

.interaction h3 {
  text-align: left;
  padding-top: 2rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-secondary);
  font-weight: 400;
  color: var(--color-tertiary);
}

.terms h3 p {
  color: #999;
}

/* Forms - login */
input[type="checkbox"] {
  display: inline-block;
  color: var(--color-tertiary);
}

.password {
  font-size: 80%;
}

.account {
  font-size: 70%;
  padding-top: 0.5rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--color-secondary);
}

.account a {
  color: var(--color-secondary);
}

.forget {
  font-size: 80%;
  padding-top: 0.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-tertiary);
}

.forget a {
  color: var(--color-secondary);
}

.alert-success {
  background-color: mediumseagreen;
  margin: 1.5rem 0 0;
  width: 370px;
  color: white;
}

.alert-error {
  background-color: tomato;
  margin: 1.5rem 0 0;
  width: 370px;
  color: white;
}

@media screen and (min-width: 768px) {
  .interaction .container {
    width: 50%;
  }

  .interaction .container .flex {
    width: 80%;
  }

  .interaction h3 {
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 768px) {
  .terms .container {
    width: 50%;
    font-size: 75%;
  }
}

@media screen and (min-width: 1024px) {
  .interaction .container {
    width: 80%;
  }

  .interaction .container .flex {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .terms .container {
    width: 45%;
    font-size: 8px;
  }
}

/* Banner */
.card__grid {
  flex-wrap: wrap;
  display: flex;
}

.card__link {
  justify-content: space-evenly;
}

.banner ul {
  list-style: none;
  margin-left: 0.5rem;
}

.banner__card {
  text-align: center;
  margin: 0.1rem;
  width: 100px;
  color: var(--color-tertiary);
  transition: transform 0.2s ease-in;
}

.banner__card:hover {
  transform: scale(0.9);
}

.banner__still:hover {
  transform: none;
}

.banner__card h4 {
  font-size: 0.8rem;
  margin-top: 0;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.profile ul {
  font-size: 0.8rem;
  margin-top: 0.8rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.view ul {
  list-style: none;
  margin-left: 1rem;
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .banner .grid--col-2-sm {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1024px) {
  .banner .container {
    width: 85%;
  }

  .banner .grid--col-2-sm {
    grid-template-columns: 2fr 1fr;
  }
}

/* Journal */
.grid {
  display: grid;
}

.len-4 {
  color: var(--color-tertiary);
}

fieldset {
  color: var(--color-tertiary);
}

.gender {
  display: block;
}

.l9 {
  width: 100%;
}

.checkbox {
  padding-bottom: 1rem;
}

textarea {
  resize: none;
}

table,
th,
td {
  border: 1px solid var(--color-tertiary);
  color: var(--color-tertiary);
  border-collapse: collapse;
  padding: 0.1rem;
}

.tablewidth table,
th,
td {
  width: 400px;
  overflow: hidden;
}

.tablewidth__data table,
th,
td {
  width: 100%;
}

.tvalue {
  width: 30%;
}

.heading {
  font-size: 1.5rem;
  padding-bottom: 0.5rem;
}

.heading2 {
  font-size: 1.5rem;
  padding-bottom: 0.2rem;
}

@media screen and (min-width: 768px) {
  .container {
    width: 90%;
  }

  .grid--col-2-alt {
    grid-template-columns: 1fr 1fr;
  }

  .grid--col-2-sm {
    grid-template-columns: 1fr 1fr;
  }

  .grid--col-2-eq {
    grid-template-columns: 1fr 3fr;
  }

  .grid--col-2-ch {
    grid-template-columns: 2fr 3fr;
  }

  .grid--col-3 {
    grid-template-columns: 1fr;
  }

  .l4 {
    width: 33.33%;
  }

  .l4-p {
    width: 30%;
  }

  .l1 {
    width: 12%;
  }

  .pad .l1 {
    width: 19%;
  }

  .l2 {
    width: 19%;
  }

  .l3 {
    width: 25%;
  }

  .pad .l2 {
    width: 33.33%;
  }

  .l2-p {
    width: 33%;
  }

  .l5-p {
    width: 47%;
  }

  .l6 {
    width: 50%;
  }

  .l7 {
    width: 62%;
  }

  .l9 {
    width: 88%;
  }

  .len-4 {
    display: flex;
    flex-wrap: wrap;
  }
  .len-4 div {
    margin: 0 0 0.1rem 0.5rem;
  }

  .tablewidth__data table,
  th,
  td {
    width: 650px;
  }

  .tablewidth__td {
    max-width: 30%;
  }
}

@media screen and (min-width: 1024px) {
  .journal .container {
    width: 85%;
  }

  .container {
    width: 85%;
  }

  .grid--col-2-alt {
    grid-template-columns: 1fr 1fr;
  }

  .grid--col-2-sm {
    grid-template-columns: 2fr 1fr;
  }

  .grid--col-2-eq {
    grid-template-columns: 1fr 3fr;
  }

  .grid--col-2-ch {
    grid-template-columns: 1fr 2fr;
  }

  .grid--col-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .l4-p {
    width: 30%;
  }

  .l4 {
    width: 33.33%;
  }

  .l5 {
    width: 40%;
  }

  .l5-p {
    width: 47%;
  }

  .l2 {
    width: 20%;
  }

  .l3 {
    width: 25%;
  }

  .l6 {
    width: 50%;
  }

  .l7 {
    width: 62%;
  }

  .l9 {
    width: 93%;
  }

  .len-4 {
    display: flex;
    flex-wrap: wrap;
  }

  .len-4 div {
    margin: 0.1rem 0 0.1rem 1rem;
  }
  .len-4 td {
    margin: 0.1rem 0 0.1rem 0;
  }

  .tablewidth__data table,
  th,
  td {
    width: 650px;
  }

  .tablewidth__td {
    max-width: 25%;
  }
}

/* Lab */
.payment {
  border: 2px solid var(--color-secondary);
}

.registernote {
  font-size: 80%;
  color: orangered;
  margin-top: 0.8rem;
  margin-bottom: 0;
}

.btn--register {
  margin-top: 0.5rem;
}

/* Zebra striping */
/*tr:nth-of-type(even) {
  background: #eee;
}*/


/* Zebra striping */
.zebra tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

/* **** borrowed css for table responsiveness for mobiles **** */
.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.table-responsive-stack td,
.table-responsive-stack th {
  display: block;
  /*      
   flex-grow | flex-shrink | flex-basis   */
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.table-responsive-stack .table-responsive-stack-thead {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .table-responsive-stack tr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-bottom: 3px solid #ccc;
    display: block;
  }
  /*  IE9 FIX   */
  .table-responsive-stack td {
    float: left\9;
    width: 100%;
  }

  .table-accounts .table-responsive-stack td {
    float: left\9;
    width: 250%;
  }
}
/* end of borrowed css for table responsiveness for mobiles */

/* Pharmacy */
@media screen and (min-width: 768px) {
  .filter {
    margin-left: 3rem;
  }
}

/* borrowed css for views */
.viewings {
  color: white;
}

.viewings ul {
  padding: 0 0 30px;
  border-bottom: 1px solid var(--color-tertiary);
  margin-bottom: 20px;
}

.viewings ul:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.viewings li {
  list-style: none;
  font-weight: 400;
  width: 100%;
  overflow: hidden;
  color: var(--color-tertiary);
  padding-bottom: 2px;
}

.field-name {
  font-weight: 500;
  min-width: 95px;
  display: inline-block;
}

.field-value {
  font-size: 0.9em;
}

/* end of borrowed css for viewing */

.pagination {
  margin-top: 1.5rem;
}

.accordion {
  background: transparent;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 0.4rem;
  width: 100%;
  border-radius: var(--border-radius);
  border: 2px var(--color-secondary) solid;
  text-align: left;
  outline: none;
  font-size: 1.5rem;
  font-weight: 300;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: var(--color-text);
  overflow: hidden;
}

.bg-test-tube {
  background: url("../static/css-sprite-combined.png") 0px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-truck {
  background: url("../static/css-sprite-combined.png") -64px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-user-menu-female {
  background: url("../static/css-sprite-combined.png") -128px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-wallet {
  background: url("../static/css-sprite-combined.png") -192px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-warm {
  background: url("../static/css-sprite-combined.png") -256px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-male-user {
  background: url("../static/css-sprite-combined.png") -320px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-headstone {
  background: url("../static/css-sprite-combined.png") -384px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-about {
  background: url("../static/css-sprite-combined.png") -448px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-ambulance {
  background: url("../static/css-sprite-combined.png") -512px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-analytics {
  background: url("../static/css-sprite-combined.png") -576px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-baby {
  background: url("../static/css-sprite-combined.png") -640px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-baseslogan {
  background: url("../static/css-sprite-combined.png") -704px -0px;
  width: 3432px;
  height: 1830px;
  display: inline-block;
}

.bg-box {
  background: url("../static/css-sprite-combined.png") -4136px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-camera {
  background: url("../static/css-sprite-combined.png") -4200px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-check {
  background: url("../static/css-sprite-combined.png") -4264px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-checked {
  background: url("../static/css-sprite-combined.png") -4328px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-copybook {
  background: url("../static/css-sprite-combined.png") -4392px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-crowd {
  background: url("../static/css-sprite-combined.png") -4456px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-diabetes {
  background: url("../static/css-sprite-combined.png") -4520px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-doctors-bag {
  background: url("../static/css-sprite-combined.png") -4584px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-documents-folder {
  background: url("../static/css-sprite-combined.png") -4648px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-edit-property {
  background: url("../static/css-sprite-combined.png") -4712px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-eye {
  background: url("../static/css-sprite-combined.png") -4776px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-female-profile {
  background: url("../static/css-sprite-combined.png") -4840px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-female-user {
  background: url("../static/css-sprite-combined.png") -4904px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-fever {
  background: url("../static/css-sprite-combined.png") -4968px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-high-priority {
  background: url("../static/css-sprite-combined.png") -5032px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-hint {
  background: url("../static/css-sprite-combined.png") -5096px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-histogram {
  background: url("../static/css-sprite-combined.png") -5160px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-hospital {
  background: url("../static/css-sprite-combined.png") -5224px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-hourglass {
  background: url("../static/css-sprite-combined.png") -5288px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-line {
  background: url("../static/css-sprite-combined.png") -5352px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-lock {
  background: url("../static/css-sprite-combined.png") -5416px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-login {
  background: url("../static/css-sprite-combined.png") -5480px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-logscheck {
  background: url("../static/css-sprite-combined.png") -5544px -1806px;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.bg-more-details {
  background: url("../static/css-sprite-combined.png") -5568px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-mother-room {
  background: url("../static/css-sprite-combined.png") -5632px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-nurse {
  background: url("../static/css-sprite-combined.png") -5696px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-pacifier {
  background: url("../static/css-sprite-combined.png") -5760px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-pass-fail {
  background: url("../static/css-sprite-combined.png") -5824px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-perfume-bottle {
  background: url("../static/css-sprite-combined.png") -5888px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-planner {
  background: url("../static/css-sprite-combined.png") -5952px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-purchase-order {
  background: url("../static/css-sprite-combined.png") -6016px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-refund {
  background: url("../static/css-sprite-combined.png") -6080px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-reminders {
  background: url("../static/css-sprite-combined.png") -6144px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-remove-property {
  background: url("../static/css-sprite-combined.png") -6208px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-search {
  background: url("../static/css-sprite-combined.png") -6272px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-shop {
  background: url("../static/css-sprite-combined.png") -6336px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-sign-out {
  background: url("../static/css-sprite-combined.png") -6400px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-standing-man {
  background: url("../static/css-sprite-combined.png") -6464px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-stethoscope {
  background: url("../static/css-sprite-combined.png") -6528px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-surgical {
  background: url("../static/css-sprite-combined.png") -6592px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-syringe {
  background: url("../static/css-sprite-combined.png") -6656px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-terms-and-conditions {
  background: url("../static/css-sprite-combined.png") -6720px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}

.bg-test-passed {
  background: url("../static/css-sprite-combined.png") -6784px -1766px;
  width: 64px;
  height: 64px;
  display: inline-block;
}


/* Modal */
/*@import "https://fonts.googleapis.com/css?family=Prompt:400,700";*/

.modal {
  /* This way it could be display flex or grid or whatever also. */
  display: block;

  /* Probably need media queries here */
  width: 800px;
  max-width: 90%;

  height: 600px;
  max-height: 100%;

  position: fixed;

  z-index: 100;

  left: 0;
  top: 0;
  bottom: 0;
  right: 0;

  margin: auto;
  /*border-radius: 0.625rem;*/

  /* If known, negative margins are probably better (less chance of blurry text). */
  /* margin: -200px 0 0 -200px; */

  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.2);
}
.closed {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;

  background: rgba(0, 0, 0, 0.404);
}
.modal-guts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px 50px 20px 20px;
}

.modal .close-button {
  position: absolute;

  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;

  top: 10px;

  /* needs to look OK with or without scrollbar */
  right: 20px;

  border: 0;
  background: var(--color-primary);
  color: var(--color-secondary);
  border-radius: 0.5rem;
  padding: 5px 10px;
  font-size: 0.8rem;
  float: right;
}

.open-button {
  border: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: lightgreen;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 21px;
}

.datepicker {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-secondary);
  /*background: var(--color-primary);*/
  color: #677788;
  font-size: 1rem;
  line-height: 1.3rem;
  outline: 0;
  padding: 0.3rem;
  width: 100%;
  margin: 0.2rem 0 0.5rem;
}

.segmented {
    display: inline-flex;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.segment {
    padding: 8px 18px;
    cursor: pointer;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.segment:last-child {
    border-right: none;
}

.segment input[type="radio"] {
    display: none; /* hide the real radio button */
}

.segment span {
    font-size: 14px;
    color: #333;
}

/* When selected */
.segment input[type="radio"]:checked + span {
    background: none;
    color: white;
}

.segment:has(input[type="radio"]:checked) {
    background: var(--color-secondary);
    color: white;
    font-weight: bold;
}


/* Base */
.log-row {
  transition: background-color 0.4s ease;
}

/* Source-based colors */
.log-FingerprintTemplate { background-color: #e3f2fd; } /* blue */
.log-Staff         { background-color: #ede7f6; } /* purple */
.log-Resident      { background-color: #e8f5e9; } /* green */
.log-Notes         { background-color: #fff3e0; } /* orange */
.log-Messaging     { background-color: #fff8e1; } /* amber */
.log-OperationNotes{ background-color: #f3e5f5; } /* violet */
.log-FaceEncoding  { background-color: #e0f2f1; } /* teal */
.log-Clearance     { background-color: #fce4ec; } /* pink */
.log-Request       { background-color: #fbe9e7; } /* red */
.log-Schedule      { background-color: #fef9c2; } /* yellow */
.log-BillPayment   { background-color: #d1d5dc; } /* grey */

/* Live-highlight (new logs) */
.log-new {
  animation: flash 1.5s ease;
}

@keyframes flash {
  0%   { background-color: #fff9c4; }
  100% { background-color: inherit; }
}

.payment-summary {
  display: flex;
  align-items: baseline; /* aligns text nicely */
  gap: 0.5rem;
}

.payment-view {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.chart-card {
    position: relative;
    height: 250px;        /* SAME for all charts */
    width: 100%;
}

.chart-card canvas {
    width: 100% !important;
    height: 100% !important;
}