/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

h1 i {
  font-weight: normal;
  font-style: normal;
}

#instruction_columns,
#process_columns {
  overflow: hidden;
  position: relative;
}
#process_columns {
  display: flex;
}
div.main.audit_results #process_columns {
  display: block;
}
h3 {
  color: #333;
  font-size: 20px;
  margin: 10px 0 0;
}
  div.main.audit_results .first_third h3,
  div.main.audit_results .second_third h3,
  div.main.audit_results .third_third h3 {
    text-align: center;
  }
div.first_third,
div.second_third,
div.third_third {
  width: 276px;
  border-radius: 10px;
  padding: 14px 17px;
  float: left;
  margin-right: 15px;
}
div.third_third {
  margin-right: 0;
}
div.main.audit_results #process_columns div.third_third {
  background-color: #FFF;
  min-height: 300px;
}
div#scan_prompt {
  min-height: 300px;
  background-color: #FFF;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #7EB71F;
  position: relative;
}
  div#scan_prompt img {
    margin-top: 30px;
  }
  div#scan_prompt input[type="submit"] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%)
  }
div#wait_prompt {
  min-height: 300px;
  background: #FFF;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #CCC;
  position: absolute;
  top: 0;
  left: 325px;
  opacity: 0;
  transition: opacity 300ms, display 300ms allow-discrete;
}
  #process_columns:has(form[aria-busy]) div#wait_prompt {
    display: block;
    opacity: 1;
    animation: none;
    @starting-style {
      opacity: 0;
    }
  }
  div#wait_prompt.linger {
    display: block;
    animation: linger_then_fade 700ms forwards;
  }
  @keyframes linger_then_fade {
    from, 57% {
      opacity: 1;
    }
    to {
      display: none;
      opacity: 0;
    }
  }
  div#wait_prompt img {
    margin-top: 30px;
  }
div.audit_bottles {
  min-height: 194px;
  background-color: #EEE;
  position: relative;
  padding-bottom: 120px;
}
  div.audit_bottles p {
    position: absolute;
    bottom: 14px;
    text-align: center;
    width: 276px;
    color: #999999;
  }
  div.audit_bottles p b {
    display: block;
    font-size: 72px;
    line-height: 72px;
  }
    div.audit_bottles.green p {
      color: #7EB71F;
    }

div.big_bottle {
  background-image: url("/assets/bottle_gray-efcf976f.svg");
  background-repeat: no-repeat;
  background-position: 55% 25%;
  background-size: 40%;
}
  div.big_bottle.green {
    background-image: url("/assets/bottle_green-063cafb7.svg");
  }

p.restart_audit {
  clear: both;
  margin-top: 50px;
  padding: 20px 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  text-align: center;
}
p.cancel{
  cursor: default;
}
  div.main.audit_results p.cancel {
    font-size: 24px;
    font-weight: bold;
  }
p.complete_audit_note {
    width: 635px;
    padding-right: 125px;
    overflow: visible;
    position: relative;
}
  p.complete_audit_note img {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 999;
  }
h5.meds_added,
h5.meds_removed,
h5.perfect_match {
  font-size: 20px;
  color: #7EB71F;
}
h5.meds_removed {
  color: red;
}
h5.perfect_match {
  color: #20A0E7;
}
h5.meds_added + p,
h5.meds_removed + p,
h5.perfect_match + p {
  font-size: 16px;
  line-height: 22px;
  padding: 5px 0;
}
table.meds_added,
table.meds_removed {
  font-size: 13px;
  color: #000;
  margin-bottom: 15px;
}
table.meds_added tr td,
table.meds_removed tr td {
  border-top: none;
  border-bottom: 1px solid #dddddd;
}
p.controlled_med_advisement {
  text-align: left;
  padding: 20px 10px 0 670px;
}
p.controlled_med_advisement strong {
  color: red;
}
div.last_audit_notice {
  float:left;
  margin: 5px 35px;
  font-size: 13px;
  color: #000;
}

/* ----- How many bottles should we show? ----- */
div.audit_bottles ul li {
  display: block;
  height: 24px;
  margin-bottom: 6px;
  background: transparent url("/assets/bottle_gray-efcf976f.svg") repeat-x left top;
  background-size: 20px 24px;
}
div.audit_bottles.green ul li {
  background: transparent url("/assets/bottle_green-063cafb7.svg") repeat-x left top;
}
#process_columns:has(#wait_prompt.linger) ul.items_to_scan li:last-child {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 20px;
    height: 24px;
    background: inherit;
    animation: scanned_bottle_leaves 500ms ease-in forwards;
  }
}
@keyframes scanned_bottle_leaves {
  from {
    clip-path: inset(0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}
#process_columns:has(#wait_prompt.linger) ul.items_scanned:not(.last_row_0) li:last-child {
  clip-path: inset(0);
  transition: clip-path 500ms ease-in;
  @starting-style {
    clip-path: inset(0 20px 0 0);
  }
}
div.audit_bottles ul.last_row_0 li:last-child {
  width: 0;
}
div.audit_bottles ul.last_row_1 li:last-child {
  width: 20px;
}
div.audit_bottles ul.last_row_2 li:last-child {
  width: 40px;
}
div.audit_bottles ul.last_row_3 li:last-child {
  width: 60px;
}
div.audit_bottles ul.last_row_4 li:last-child {
  width: 80px;
}
div.audit_bottles ul.last_row_5 li:last-child {
  width: 100px;
}
div.audit_bottles ul.last_row_6 li:last-child {
  width: 120px;
}
div.audit_bottles ul.last_row_7 li:last-child {
  width: 140px;
}
div.audit_bottles ul.last_row_8 li:last-child {
  width: 160px;
}
div.audit_bottles ul.last_row_9 li:last-child {
  width: 180px;
}
div.audit_bottles ul.last_row_10 li:last-child {
  width: 200px;
}
div.audit_bottles ul.last_row_11 li:last-child {
  width: 220px;
}
div.audit_bottles ul.last_row_12 li:last-child {
  width: 240px;
}
div.audit_bottles ul.last_row_13 li:last-child {
  width: 260px;
}
div.audit_bottles ul.last_row_14 li:last-child {
  width: 280px;
}