html,
body {
  background: #646464;
  height: 100%;
  overflow-x: hidden;
}
body {
  font-size: 16px;
  line-height: 22px;
  color: #222222;
  font-family: "Open Sans", Tahoma, sans-serif;
  background: url(../images/pagebg.png);
}
@media only screen and (max-height: 800px) {
  body {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  body {
    line-height: 20px;
  }
}
ng-view {
  height: 100%;
  min-height: 660px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", Tahoma, sans-serif;
}
h1 {
  font-size: 38px;
  line-height: 45px;
  margin-top: 45px;
  margin-bottom: 22px;
}
@media only screen and (max-height: 800px) {
  h1 {
    font-size: 33px;
  }
}
@media only screen and (max-height: 800px) {
  h1 {
    line-height: 39px;
  }
}
@media only screen and (max-height: 800px) {
  h1 {
    margin-top: 39px;
    margin-bottom: 20px;
  }
}
h2 {
  font-size: 28px;
  line-height: 45px;
  margin-top: 45px;
  margin-bottom: 22px;
}
@media only screen and (max-height: 800px) {
  h2 {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  h2 {
    line-height: 39px;
  }
}
@media only screen and (max-height: 800px) {
  h2 {
    margin-top: 39px;
    margin-bottom: 20px;
  }
}
h3 {
  font-size: 21px;
  line-height: 22px;
  margin-top: 22px;
  margin-bottom: 22px;
  color: #555555;
}
@media only screen and (max-height: 800px) {
  h3 {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  h3 {
    line-height: 20px;
  }
}
@media only screen and (max-height: 800px) {
  h3 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
h4 {
  font-size: 16px;
  line-height: 22px;
  margin-top: 22px;
  margin-bottom: 0px;
}
@media only screen and (max-height: 800px) {
  h4 {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  h4 {
    line-height: 20px;
  }
}
@media only screen and (max-height: 800px) {
  h4 {
    margin-top: 20px;
    margin-bottom: 0px;
  }
}
p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0px;
  margin-bottom: 22px;
}
@media only screen and (max-height: 800px) {
  p,
  ul,
  ol,
  pre,
  table,
  blockquote {
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
a:link,
a:visited {
  color: #00afec;
  text-decoration: none;
}
a:link:hover,
a:visited:hover {
  text-decoration: underline;
}
/* Sanitation */
hr {
  border: 1px solid #555555;
  margin: -1px 0;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
b,
strong,
em,
small,
code {
  line-height: 1;
}
sup,
sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}
button {
  background: #00afec;
  padding: 0.9em 1.5em;
  border: 0 solid #00afec;
  color: #ffffff;
  border-radius: 0.75em;
}
button:hover {
  background: #01bdff;
  cursor: pointer;
}
chart-patient {
  display: block;
  position: relative;
  height: 110px;
}
canvas {
  background: #ffffff;
  border-radius: 15px;
  width: 100%;
}
dt {
  text-transform: capitalize;
}
.header-item {
  min-width: 1em;
  margin: 0 1em;
  cursor: pointer;
}
.header-item:hover:not(#playPause) {
  text-decoration: underline;
}
#playPause {
  margin-left: 2em;
}
.action-button {
  -ms-flex: 1 1 48%;
      flex: 1 1 48%;
  box-sizing: border-box;
  max-width: 48%;
  padding: 8px;
  margin: 3px 0;
  background: #a0a0a0;
  height: 4em;
  border: 1px solid #adadad;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #6d6d6d;
  border-radius: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}
.chart-highlight {
  color: #00afec;
}
.patient-detail-item {
  margin-bottom: 1em;
}
.patient-detail-key {
  text-transform: uppercase;
  color: #00afec;
  font-weight: bold;
}
.drqi {
  background: #ccc;
  padding: 10px;
  border-radius: 15px;
  margin: 0 2em 0 0;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.5;
  font-size: 0.75em;
  font-weight: bold;
}
.best-safety {
  background: #22d1ae;
  border-color: #45e1c2;
}
.good-safety {
  background: #fed426;
  border-color: #fede59;
}
.ok-safety {
  background: #db7916;
  border-color: #eb9239;
}
.poor-safety {
  background: #dc2717;
  border-color: #eb4a3b;
}
.blur {
  filter: blur(7px);
}
.trip-exposed {
  background: transparent;
}
.action-button.disabled {
  background: #6d6d6d;
  border-color: #7a7a7a;
}
.action-button.disabled.correct {
  background: #1ebb9c;
  border-color: #22d1ae;
}
.action-button.disabled.incorrect {
  background: #c52315;
  border-color: #dc2717;
}
.action-button:hover:not(.correct):not(.incorrect) {
  cursor: pointer;
  background: #00afec;
  border-color: #07bfff;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes quiz-modal-animate-in {
  from {
    opacity: .5;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.patient {
  transition: top 150ms, background-color 250ms;
}
.action-button {
  transition: background-color 70ms;
}
.mc-answer-list-item {
  transition: background-color 150ms;
}
.mc-quiz-response.ng-enter {
  transition: 0.3s linear all;
  opacity: 0;
}
/* The finishing CSS styles for the enter animation */
.mc-quiz-response.ng-enter.ng-enter-active {
  opacity: 1;
}
.modal.ng-hide-remove {
  opacity: 0;
  animation: fade-in 150ms cubic-bezier(0.165, 0.84, 0.44, 1) 130ms forwards;
}
.quiz-modal.ng-hide-remove .modal-content {
  opacity: 0;
  animation: quiz-modal-animate-in 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 130ms forwards;
}
.question.ng-enter {
  opacity: 0;
  animation: fade-in 150ms cubic-bezier(0.165, 0.84, 0.44, 1) 130ms forwards;
}
.question.ng-leave {
  animation: fade-out 130ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#loadScreen {
  height: 100%;
  width: 80%;
  max-width: 1300px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}
#loadScreen h1 {
  text-align: center;
  color: #ffffff;
}
#loadScreen #logo {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 590px;
}
#loadScreen .hidden {
  display: none !important;
}
.mainMenu {
  color: #ffffff;
  margin-top: 5vh;
  height: 90vh;
  font-weight: 600;
}
.mainMenu #version {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1em;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  margin: 1em;
}
.mainMenu .menu-container {
  height: 100%;
  max-width: 1190px;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}
.mainMenu #menuHead {
  width: 100%;
  float: left;
}
.mainMenu #logo {
  width: 100%;
  max-width: 590px;
  height: auto;
  display: block;
  float: left;
}
.mainMenu #main {
  max-width: 590px;
  width: 100%;
  float: left;
}
.mainMenu #mainLevels {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  list-style: none;
  padding: 0;
}
.mainMenu #mainLevels li {
  text-align: center;
  font-size: 28px;
  text-transform: uppercase;
  width: 48%;
  font-weight: 600;
  margin-top: 15px;
  padding: 2em 20px;
  box-sizing: border-box;
  background: #00afec;
  border-radius: 15px;
}
@media only screen and (max-height: 800px) {
  .mainMenu #mainLevels li {
    font-size: 25px;
  }
}
.mainMenu #mainLevels li:hover {
  cursor: pointer;
  background: #20c5ff;
}
.mainMenu #secondaryButtons {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 0 0 0 2rem;
  margin: 0;
}
.mainMenu #secondaryButtons li {
  width: 45%;
  text-align: center;
  background: #22d1ae;
  padding: 0.75em;
  box-sizing: border-box;
  border-radius: 15px;
  margin-bottom: 1rem;
}
.mainMenu #secondaryButtons li:hover {
  background: #45e1c2;
  cursor: pointer;
}
.mainMenu #playerInfo {
  margin: 1rem 0 2rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.mainMenu #playerInfo div {
  display: inline-block;
}
.mainMenu #playerInfo .google-logged-in {
  font-size: 13px;
  line-height: 1.2;
}
.mainMenu #playerInfo .welcome-back {
  width: 60%;
  font-size: 21px;
  line-height: 1.6rem;
}
@media only screen and (max-height: 800px) {
  .mainMenu #playerInfo .welcome-back {
    font-size: 19px;
  }
}
.mainMenu #playerInfo .welcome-back div {
  display: block;
}
.mainMenu #playerInfo .welcome-back .google-login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.mainMenu #playerInfo .welcome-back .google-login .store-saves {
  margin-right: 5px;
}
.mainMenu #playerInfo .total-score {
  text-align: right;
  width: 40%;
  line-height: 2rem;
  font-size: 28px;
  cursor: pointer;
  position: relative;
}
@media only screen and (max-height: 800px) {
  .mainMenu #playerInfo .total-score {
    font-size: 25px;
  }
}
.mainMenu #playerInfo .fls-define:after {
  content: "\2009[\2009?\2009]\2009";
  vertical-align: super;
  font-size: 50%;
}
.mainMenu #changeInfo {
  color: #3accff;
  cursor: pointer;
}
.mainMenu .max-lives {
  float: left;
  height: 1em;
}
.mainMenu .medals-title {
  display: inline-block;
  vertical-align: top;
}
.mainMenu #medalsList {
  margin: 0 0 0 1em;
  padding: 0;
  display: inline-block;
  position: relative;
  top: -9px;
}
.mainMenu #medalsList li {
  display: inline-block;
}
.mainMenu .legend {
  text-align: right;
  float: right;
}
.mainMenu .legend-item {
  display: inline-block;
  margin: 0 1em 0 0;
}
.mainMenu .legend-item img {
  position: relative;
  background: #a0a0a0;
  top: 3px;
  left: 5px;
  display: inline-block;
  margin-right: .5em;
}
.mainMenu #caseLists {
  margin: 1em 0 3em;
  padding: 0;
  list-style: none;
  float: left;
  width: 100%;
}
.mainMenu .case-list-wrapper {
  width: 22%;
  padding: 0 2%;
  float: left;
}
.mainMenu .case-list-wrapper:first-child {
  padding-left: 0;
}
.mainMenu .case-list-wrapper:last-child {
  padding-right: 0;
}
.mainMenu .case-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mainMenu .case-list-head h2 {
  line-height: 1;
  margin: 0 0 1rem;
  cursor: pointer;
}
.mainMenu .case-list-head h2:after {
  content: "[\2009?\2009]";
  vertical-align: super;
  font-size: 50%;
}
.mainMenu .case-list-head h2.cme {
  cursor: auto;
}
.mainMenu .case-list-head h2.cme:after {
  content: '';
}
.mainMenu .fa-trophy {
  text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
  margin: 0 0.25rem 0 0;
}
.mainMenu .lv1 {
  color: #ec8c00;
}
.mainMenu .lv2 {
  color: #ababab;
}
.mainMenu .lv3 {
  color: #e4b25b;
}
.mainMenu .lv4 {
  color: #22d1ae;
}
.mainMenu .single-case {
  background: #a0a0a0;
  padding: 1em;
  margin: 1em 0;
  box-sizing: border-box;
  border-radius: 15px;
  font-weight: 600;
}
.mainMenu .single-case:hover {
  background: #bababa;
  cursor: pointer;
}
.mainMenu .single-case.complete {
  background: rgba(255, 255, 255, 0.25);
  color: #e6e6e6;
}
.mainMenu .single-case.disabled {
  background: #7a7a7a;
  cursor: auto;
  color: #d9d9d9;
}
.mainMenu .single-case-info {
  color: #3c3c3c;
  position: relative;
}
.mainMenu .single-case-info .qi-tool-icon {
  font-size: 2.5rem;
  float: left;
  margin: 0 .5rem 0 0;
  padding: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}
.mainMenu .single-case-info .case-number {
  text-transform: uppercase;
  margin: 0 0 0 50px;
}
.mainMenu .single-case-info .single-case-tool {
  margin: 0 0 0 50px;
}
.mainMenu .single-case-info .surgery:after {
  content: "";
  display: inline-block;
  height: 16px;
  width: 16px;
  position: relative;
  top: 3px;
  left: 5px;
  background: url("../images/icons/icon_surgery_v1.png");
}
.mainMenu .single-case-info .pediatric:after {
  content: "";
  display: inline-block;
  height: 16px;
  width: 16px;
  position: relative;
  top: 3px;
  left: 5px;
  background: url("../images/icons/icon_pediatrics_v1.png");
}
.mainMenu .single-case-name {
  margin: 0.5em 0 0.25em;
  font-size: 21px;
}
@media only screen and (max-height: 800px) {
  .mainMenu .single-case-name {
    font-size: 19px;
  }
}
.mainMenu #gmeCustom ul {
  list-style: none;
  padding: 0;
}
.mainMenu #gmeCustom ul li {
  margin: 0 0 1rem;
}
#portraitWarning,
#resolutionWarning {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 5%;
  box-sizing: border-box;
  z-index: 9999;
  font-size: 51px;
  line-height: 67px;
  color: white;
  background: #646464 url(../images/pagebg.png);
  display: none;
}
@media only screen and (max-height: 800px) {
  #portraitWarning,
  #resolutionWarning {
    font-size: 44px;
  }
}
@media only screen and (max-height: 800px) {
  #portraitWarning,
  #resolutionWarning {
    line-height: 59px;
  }
}
.game-container {
  max-width: 1300px;
  width: 90%;
  min-width: 850px;
  height: calc(100% - 3rem);
  margin: 0 auto;
  box-sizing: border-box;
}
.section-title {
  text-align: center;
  text-transform: uppercase;
  color: #bababa;
  font-size: 110%;
  margin: .5em;
  height: 2rem;
  box-sizing: border-box;
}
.pause-content {
  z-index: 50;
  text-align: center;
}
.pause-content h2 {
  color: #ffffff;
  font-size: 90px;
  line-height: 67px;
  margin-top: 0px;
  margin-bottom: 22px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@media only screen and (max-height: 800px) {
  .pause-content h2 {
    font-size: 79px;
  }
}
@media only screen and (max-height: 800px) {
  .pause-content h2 {
    line-height: 59px;
  }
}
@media only screen and (max-height: 800px) {
  .pause-content h2 {
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
.trip-block {
  max-width: 300px;
  border: 2px solid #777;
}
.trip-block a:link,
.trip-block a:hover,
.trip-block a:visited {
  color: #ffffff;
}
#gameHead {
  background: #00afec;
  color: #ffffff;
  font-size: 16px;
  position: relative;
  z-index: 50;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  height: 3rem;
  box-sizing: border-box;
  padding: 0.75em;
  box-shadow: 4px 5px 15.48px 2.52px rgba(0, 0, 0, 0.13);
}
@media only screen and (max-height: 800px) {
  #gameHead {
    font-size: 14px;
  }
}
.case-title {
  font-size: 21px;
  -ms-flex: 3;
      flex: 3;
  font-weight: 600;
  text-align: center;
}
@media only screen and (max-height: 800px) {
  .case-title {
    font-size: 19px;
  }
}
#totalScore {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0 0.5em;
  text-align: center;
  cursor: pointer;
}
#totalScore .head-score {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0.5em;
  text-align: right;
}
@media only screen and (max-height: 800px) {
  #totalScore .head-score {
    font-size: 25px;
  }
}
#progress {
  font-size: 16px;
  line-height: 22px;
  margin: 0.3em;
  -ms-flex: 2;
      flex: 2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
}
@media only screen and (max-height: 800px) {
  #progress {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  #progress {
    line-height: 20px;
  }
}
#actions {
  float: left;
  width: 24%;
  height: 97%;
  margin-right: 3%;
}
#actionList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
#patientDetails {
  height: 100%;
  width: 55%;
  float: left;
  background: #ffffff;
  box-shadow: -15px 6px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  overflow-x: visible;
}
#patientDetails .toggle {
  display: none;
}
#chartWrapper {
  height: 100%;
  overflow-y: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
#chartWrapper h2,
#chartWrapper h3 {
  margin-top: 22px;
  margin-bottom: 22px;
  text-transform: uppercase;
}
@media only screen and (max-height: 800px) {
  #chartWrapper h2,
  #chartWrapper h3 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
#detailsName {
  font-size: 180%;
}
#chartNav ul {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 0;
  margin: 0 0 -1px;
}
#chartNav ul li {
  width: 31%;
  box-sizing: border-box;
  border: 1px solid #222222;
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #00afec;
  color: #ffffff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  cursor: pointer;
}
#chartNav ul li.active {
  border-bottom-width: 0;
  background-color: #ffffff;
  color: #00afec;
  position: relative;
  padding-bottom: calc(1em + 1px);
  top: 1px;
}
#chartContent {
  border: 1px solid #222222;
  padding: 1em;
  -ms-flex: 1;
      flex: 1;
  overflow: auto;
}
#chartContent h3 {
  text-transform: uppercase;
}
#detailsMedical {
  list-style: none;
  padding: 0;
}
#performedActions {
  list-style: none;
  margin: 0;
  padding: 0;
}
#patients {
  width: 15%;
  margin-right: 3%;
  float: left;
  height: 97%;
}
#patientListWrapper {
  height: calc(97% - 2rem);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.2), inset 0 0 0 3px #a0a0a0;
  border-radius: 20px;
  background: linear-gradient(to bottom, #a0a0a0, #a0a0a0 70%, #af827e 90%, #be645c 100%);
  padding: 15px;
  box-sizing: border-box;
  margin: 0;
  position: relative;
}
#patientListWrapper:before {
  content: 'HARM';
  position: absolute;
  left: 0;
  bottom: 14px;
}
#patientListWrapper:after {
  content: 'SAFE';
  position: absolute;
  left: 0;
  top: 2em;
}
#patientListWrapper:before,
#patientListWrapper:after {
  letter-spacing: 0.1em;
  color: #b4b4b4;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}
#patientList {
  height: 100%;
  min-height: 235px;
  background: url(/images/grade-lines.png) 0 0 repeat-x;
  background-size: auto 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.qi-container {
  display: block;
  max-width: 1300px;
  width: 90%;
  min-width: 850px;
  margin: 1rem auto 0;
  box-sizing: border-box;
  margin-bottom: 7rem;
  color: #ffffff;
}
.qi-container h1,
.qi-container h2 {
  text-align: center;
}
.qi-page {
  width: 100%;
  margin-bottom: 1rem;
}
.qi-desc {
  margin: 1em 0;
  font-size: 28px;
  line-height: 45px;
}
@media only screen and (max-height: 800px) {
  .qi-desc {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  .qi-desc {
    line-height: 39px;
  }
}
.qi-dnd {
  margin: 0 auto;
  max-width: 100%;
}
.qi-next {
  position: fixed;
  bottom: 1em;
  right: 1em;
  margin: 1em;
}
.qi-next button {
  background: #22d1ae;
  font-size: 28px;
  text-transform: uppercase;
  margin: 0;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-height: 800px) {
  .qi-next button {
    font-size: 25px;
  }
}
.qi-next button:disabled {
  visibility: hidden;
}
#qiNav {
  position: fixed;
  bottom: 1em;
  left: 1em;
  margin: 1em;
}
#qiNav button {
  font-size: 21px;
  text-transform: uppercase;
  margin: 0;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  outline: none;
}
@media only screen and (max-height: 800px) {
  #qiNav button {
    font-size: 19px;
  }
}
.qi-references {
  margin: 0 0 0 25px;
}
.qi-references h2 {
  font-size: 21px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: left;
  margin: 0;
}
@media only screen and (max-height: 800px) {
  .qi-references h2 {
    font-size: 19px;
  }
}
.qi-references ul {
  list-style: none;
  padding: 0;
  margin-bottom: 3em;
}
.qi-references ul li {
  margin-bottom: 1em;
}
.qi-references a:link,
.qi-references a:visited {
  color: #ffffff;
  text-decoration: underline;
}
.qi-quiz {
  background: white;
  border-radius: 2em;
  padding: 25px;
  color: black;
  width: 100%;
  box-sizing: border-box;
}
.quiz-intro {
  font-size: 17px;
  line-height: 22px;
  text-align: center;
}
@media only screen and (max-height: 800px) {
  .quiz-intro {
    font-size: 15px;
  }
}
@media only screen and (max-height: 800px) {
  .quiz-intro {
    line-height: 20px;
  }
}
.question {
  position: absolute;
  top: 35px;
  right: 35px;
  left: 35px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: calc(100% - 140px);
}
.mc-question {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 28px;
  margin-top: 0px;
  margin-bottom: 22px;
  color: #00afec;
}
@media only screen and (max-height: 800px) {
  .mc-question {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  .mc-question {
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
.question-drop {
  font-size: 51px;
  line-height: 1;
  padding-right: .75em;
}
@media only screen and (max-height: 800px) {
  .question-drop {
    font-size: 44px;
  }
}
.question-text {
  font-size: 18px;
  line-height: 22px;
}
@media only screen and (max-height: 800px) {
  .question-text {
    font-size: 16px;
  }
}
@media only screen and (max-height: 800px) {
  .question-text {
    line-height: 20px;
  }
}
.mc-answer-list {
  -ms-flex: 1;
      flex: 1;
  padding: 0 1em 0 0;
  list-style: none;
  counter-reset: answers;
  overflow: auto;
}
.mc-answer-list-item {
  margin: 0.5em 0;
  padding: .75em;
  border-radius: .75em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.mc-answer-list-item:not(.disabled):not(.correct):not(.wrong):hover {
  background: #eee;
}
.mc-answer-list-item.disabled {
  background: #ccc;
  color: #ffffff;
}
.mc-answer-list-item.disabled .mc-answer-button {
  color: #ffffff;
}
.mc-answer-list-item.disabled:before {
  color: #ffffff;
}
.mc-answer-list-item.correct {
  background: #45e1c2;
}
.mc-answer-list-item.wrong {
  background: #eb4a3b;
}
.mc-answer-list-item:before {
  content: counter(answers, lower-alpha) ".";
  counter-increment: answers;
  font-size: 28px;
  line-height: 22px;
  display: inline-block;
  width: 2rem;
  font-weight: bold;
  color: #767676;
}
@media only screen and (max-height: 800px) {
  .mc-answer-list-item:before {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  .mc-answer-list-item:before {
    line-height: 20px;
  }
}
.mc-answer-button {
  background: none;
  border: none;
  text-align: left;
  font-size: 21px;
  line-height: 22px;
  -ms-flex: 1;
      flex: 1;
  color: #222222;
  padding: 2px 6px 3px;
}
@media only screen and (max-height: 800px) {
  .mc-answer-button {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .mc-answer-button {
    line-height: 20px;
  }
}
.mc-answer-button:hover {
  background: transparent;
}
.mc-quiz-response-inline {
  margin: 0.5em 0 0.5em 2rem;
  width: 100%;
}
.mc-quiz-response-inline:before {
  content: "";
  display: block;
  height: 1px;
  width: 5rem;
  background: #ffffff;
  margin: 0.2rem 0 0.5rem;
}
.mc-quiz-response-all-correct {
  font-size: 21px;
  line-height: 45px;
  padding: 1em 0 0;
  border-top: 1px solid #222222;
}
@media only screen and (max-height: 800px) {
  .mc-quiz-response-all-correct {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .mc-quiz-response-all-correct {
    line-height: 39px;
  }
}
.qi-text {
  width: 100%;
  box-sizing: border-box;
  background: white;
  border-radius: 2em;
  padding: 2em;
  color: black;
  margin-top: 2em;
  display: -ms-flexbox;
  display: flex;
  font-size: 21px;
  line-height: 45px;
}
@media only screen and (max-height: 800px) {
  .qi-text {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .qi-text {
    line-height: 39px;
  }
}
.qi-text .qi-text-content {
  -ms-flex: 1;
      flex: 1;
}
#priceIsRight {
  background: #ffffff;
  min-height: 70%;
  text-align: center;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 1em;
  margin: 1em 0;
  color: #222222;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
#pirQuestion {
  color: #00afec;
}
.cost,
.charge {
  color: #222222;
}
#pirContent {
  width: 80%;
}
#pirContent .ten-percent {
  color: #999;
}
#pirResponse {
  font-size: 51px;
  line-height: 67px;
  min-height: 60px;
  margin: 1rem;
}
@media only screen and (max-height: 800px) {
  #pirResponse {
    font-size: 44px;
  }
}
@media only screen and (max-height: 800px) {
  #pirResponse {
    line-height: 59px;
  }
}
#pirResponse .correct {
  color: #22d1ae;
}
#pirResponse .wrong {
  color: #dc2717;
}
#playerGuess {
  border: 1rem solid #ccc;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
  font-size: 38px;
  line-height: 2em;
  padding: 0.5rem 2rem;
  margin: 0 auto 1rem;
}
@media only screen and (max-height: 800px) {
  #playerGuess {
    font-size: 33px;
  }
}
#playerGuess input {
  -ms-flex: 1;
      flex: 1;
  border: 0;
  outline: 0;
}
#playerGuess input:disabled {
  background: #ffffff;
}
#pirTeamResponses ul {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
#pirTeamResponses ul li {
  -ms-flex: 1;
      flex: 1;
  text-align: center;
}
#pirTeamResponses ul li .pir-guess-value {
  font-size: 28px;
}
@media only screen and (max-height: 800px) {
  #pirTeamResponses ul li .pir-guess-value {
    font-size: 25px;
  }
}
#endLevelWrapper {
  background: #ffffff;
  height: 90vh;
  width: 100%;
  max-width: 1300px;
  position: relative;
  top: 5vh;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2em;
  border-radius: 15px;
}
#endLevel {
  height: calc(100% - 3em);
  width: 100%;
  overflow: auto;
}
.congrats {
  margin: 0;
  text-align: center;
  color: #22d1ae;
}
.qi-portrait {
  float: left;
  margin: 0 1em 0;
  width: 160px;
  font-size: 21px;
  font-weight: 600;
  text-align: center;
}
@media only screen and (max-height: 800px) {
  .qi-portrait {
    font-size: 19px;
  }
}
.take-home-message {
  font-size: 28px;
  line-height: 45px;
  width: calc(100% - 160px - 2em);
  float: right;
}
@media only screen and (max-height: 800px) {
  .take-home-message {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  .take-home-message {
    line-height: 39px;
  }
}
.score-and-tool {
  width: 100%;
  float: left;
}
.score-and-tool.new-medal > div {
  width: 32% !important;
}
.score-wrapper,
.qi-tool-wrapper {
  float: left;
  margin: 0;
  width: 49%;
  text-align: center;
}
.score {
  font-size: 120px;
  line-height: 112px;
  font-weight: 700;
  color: #22d1ae;
}
@media only screen and (max-height: 800px) {
  .score {
    font-size: 105px;
  }
}
@media only screen and (max-height: 800px) {
  .score {
    line-height: 98px;
  }
}
#endButtons {
  clear: both;
  text-align: center;
  font-size: 21px;
}
@media only screen and (max-height: 800px) {
  #endButtons {
    font-size: 19px;
  }
}
#endButtons button {
  background: #22d1ae;
}
.new-medal-announce {
  float: left;
  text-align: center;
  font-size: 21px;
  line-height: 45px;
  margin: 0 auto 2rem;
}
@media only screen and (max-height: 800px) {
  .new-medal-announce {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .new-medal-announce {
    line-height: 39px;
  }
}
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  #portraitWarning {
    display: block;
  }
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
  #portraitWarning {
    display: block;
  }
}
@media only screen and (max-width: 1100px) {
  .mainMenu #logo {
    margin: 0 calc((100% - 590px)/2);
  }
  .mainMenu #secondaryButtons {
    clear: both;
    padding: 1rem;
  }
  #patients {
    width: 17%;
  }
  #actions {
    width: 22%;
  }
  #actionList {
    display: block;
  }
  #actionList .action-button {
    max-width: 100%;
    margin: 5px 0;
  }
}
@media only screen and (max-width: 903px) {
  #resolutionWarning {
    display: block !important;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  z-index: 1000;
  font-size: 28px;
  line-height: 45px;
  text-align: center;
}
@media only screen and (max-height: 800px) {
  .modal {
    font-size: 25px;
  }
}
@media only screen and (max-height: 800px) {
  .modal {
    line-height: 39px;
  }
}
.modal h1 {
  margin: .25em 0;
  text-transform: uppercase;
  text-align: center;
  color: #00afec;
}
.modal .dimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.modal .modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
  z-index: 50;
  width: 65%;
  height: 75%;
  background: white;
  box-sizing: border-box;
  padding: 35px;
  border-radius: 20px;
}
.modal .close {
  text-align: center;
  clear: both;
}
.modal button {
  margin: 0.5em;
  padding: 1.5em 1em;
  min-width: 7em;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 21px;
  line-height: 22px;
  background: #22d1ae;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-height: 800px) {
  .modal button {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .modal button {
    line-height: 20px;
  }
}
.feedback-modal .feedback-content {
  min-height: 70vh;
}
.feedback-modal .mood h2 {
  font-size: 38px;
  margin: 0 auto;
}
@media only screen and (max-height: 800px) {
  .feedback-modal .mood h2 {
    font-size: 33px;
  }
}
.feedback-modal .mood h2:before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative;
  top: .1em;
  left: -0.25em;
}
.feedback-modal .mood.correct {
  color: #22d1ae;
}
.feedback-modal .mood.correct h2:before {
  background: url(../images/big-feedback-good.png) no-repeat;
  background-size: contain;
}
.feedback-modal .mood.neutral {
  color: #666666;
}
.feedback-modal .mood.neutral h2:before {
  background: url(../images/big-feedback-okay.png) no-repeat;
  background-size: contain;
}
.feedback-modal .mood.incorrect {
  color: #dc2717;
}
.feedback-modal .mood.incorrect h2:before {
  background: url(../images/big-feedback-bad.png) no-repeat;
  background-size: contain;
}
.feedback-modal .saved-lives {
  font-size: 28px;
  color: #999;
  font-weight: 600;
  margin-top: 5px;
}
@media only screen and (max-height: 800px) {
  .feedback-modal .saved-lives {
    font-size: 25px;
  }
}
.feedback-modal .announce-message {
  font-size: 21px;
  line-height: 45px;
  -ms-flex: 1;
      flex: 1;
  text-align: left;
}
@media only screen and (max-height: 800px) {
  .feedback-modal .announce-message {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .feedback-modal .announce-message {
    line-height: 39px;
  }
}
.feedback-modal .announce-message .safety-falling {
  margin-top: 2em;
}
.takehome-content .take-home-message {
  -ms-flex: 1;
      flex: 1;
  text-align: left;
  font-size: 21px;
  line-height: 22px;
}
@media only screen and (max-height: 800px) {
  .takehome-content .take-home-message {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .takehome-content .take-home-message {
    line-height: 20px;
  }
}
.takehome-content .qi-and-score {
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  min-height: 300px;
}
.takehome-content .qi-portrait {
  line-height: 1.5;
  margin-right: 15px;
}
.takehome-content .hide-takehome {
  margin: 1em 0 0;
}
.takehome-content .hide-takehome button {
  margin: 0;
}
.newpatient-modal {
  text-align: left;
  font-size: 16px;
  line-height: 22px;
}
@media only screen and (max-height: 800px) {
  .newpatient-modal {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  .newpatient-modal {
    line-height: 20px;
  }
}
.newpatient-modal h2 {
  margin: 0.25em 0;
}
.newpatient-modal .newpatient-name {
  text-transform: uppercase;
  color: #00afec;
}
.newpatient-modal .patient-stats {
  -ms-flex: 1;
      flex: 1;
  overflow: auto;
  padding-right: 0.5em;
}
.newpatient-modal h3 {
  line-height: 1.5em;
}
.newpatient-modal i.fa {
  font-size: 1.5em;
  margin-right: 0.25em;
  color: #00afec;
}
.glossary-modal {
  font-size: 16px;
  line-height: 22px;
  text-align: left;
}
@media only screen and (max-height: 800px) {
  .glossary-modal {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  .glossary-modal {
    line-height: 20px;
  }
}
dl {
  margin: 0;
  overflow: auto;
}
dt {
  margin: 0 0 0.5em;
  font-size: 21px;
  font-weight: bold;
  color: #767676;
  text-transform: capitalize;
}
@media only screen and (max-height: 800px) {
  dt {
    font-size: 19px;
  }
}
dd {
  margin: 0 0 1.5em;
}
.patient-fail-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
}
.concern-doctor {
  width: 50%;
}
.concern-image {
  height: calc(100% - 2rem);
  background-size: contain !important;
  background-position-x: center;
}
.concern-name {
  padding: 1rem;
  height: 2rem;
}
.mitesh-concerned {
  background: url(../images/headshots/DrSafetyMiteshConcernEdited.png) no-repeat;
}
.raj-concerned {
  background: url(../images/headshots/DrQIRajConcernEdited.png) no-repeat;
}
.patient-fail-text {
  -ms-flex: 1;
      flex: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.patient-fail-text p {
  max-width: 100%;
}
.updates-modal {
  color: #222222;
  font-size: 21px;
  line-height: 34px;
  font-weight: 400;
  text-align: left;
}
@media only screen and (max-height: 800px) {
  .updates-modal {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .updates-modal {
    line-height: 29px;
  }
}
.updates-modal .update-list {
  overflow: auto;
}
.credits-modal {
  color: #222222;
  font-size: 21px;
  line-height: 31px;
  font-weight: 400;
  text-align: left;
}
@media only screen and (max-height: 800px) {
  .credits-modal {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .credits-modal {
    line-height: 27px;
  }
}
.credits-modal .credits-list {
  overflow: auto;
  padding-right: 0.5em;
}
.credits-modal ul {
  padding: 0;
  list-style: none;
}
.credits-modal .credits-group {
  width: 50%;
  min-width: 375px;
  float: left;
}
.credits-modal .credits-group-long {
  clear: both;
}
.credits-modal .credits-group-long ul {
  -moz-column-count: 4;
       column-count: 4;
}
.data-collection-modal {
  color: #222222;
  font-weight: 400;
}
.data-collection-modal .modal-content {
  display: block;
}
.data-collection-modal h2 {
  color: #22d1ae;
  margin: 0 0 0.5rem;
}
.data-collection-modal p.subtitle {
  font-size: 21px;
}
@media only screen and (max-height: 800px) {
  .data-collection-modal p.subtitle {
    font-size: 19px;
  }
}
.data-collection-modal #formWrapper {
  height: 100%;
  overflow: auto;
}
.data-collection-modal label {
  font-size: 21px;
  display: block;
  text-align: left;
}
@media only screen and (max-height: 800px) {
  .data-collection-modal label {
    font-size: 19px;
  }
}
.data-collection-modal input,
.data-collection-modal select {
  display: block;
  font-size: 28px;
  margin: 0 0 0.5rem;
  padding: 0.5rem;
  width: 95%;
  box-sizing: border-box;
}
@media only screen and (max-height: 800px) {
  .data-collection-modal input,
  .data-collection-modal select {
    font-size: 25px;
  }
}
.data-collection-modal input.ng-invalid.ng-touched,
.data-collection-modal select.ng-invalid.ng-touched {
  border: 1px solid #dc2717;
}
.data-collection-modal input.ng-valid,
.data-collection-modal select.ng-valid {
  border: 1px solid #22d1ae;
}
.data-collection-modal .form-other {
  width: 90%;
  margin-left: 5%;
}
.doctors-bag-modal {
  color: #222222;
}
.doctors-bag-modal h2 {
  margin-top: 0;
  color: #00afec;
}
.doctors-bag-modal #qiToolList {
  overflow: auto;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
.doctors-bag-modal .doctors-bag-tool {
  width: 24%;
}
.level-desc-modal {
  color: #222222;
  text-align: left;
  font-weight: 400;
  font-size: 21px;
}
@media only screen and (max-height: 800px) {
  .level-desc-modal {
    font-size: 19px;
  }
}
.level-desc-modal h2 {
  text-align: center;
}
.level-desc-modal p,
.level-desc-modal ol {
  max-width: 800px;
  margin: 0 auto;
}
.level-desc-content {
  overflow: auto;
}
.scroll-wrap {
  overflow: auto;
  height: 100%;
}
.big-trophy {
  margin-top: 2rem;
  text-align: center;
  font-size: 120px;
}
@media only screen and (max-height: 800px) {
  .big-trophy {
    font-size: 105px;
  }
}
.level-complete-modal {
  color: #222222;
  font-weight: 400;
}
.level-complete-modal .content-wrap {
  width: 90%;
  margin: 0 auto;
}
.level-complete-modal h2 {
  margin: 0 0 1rem;
}
.level-complete-modal #qiToolList {
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
  text-align: center;
}
.level-complete-modal #qiToolList li {
  display: inline-block;
  margin: 0 10px;
}
.hundred-percent-modal {
  color: #222222;
  font-size: 21px;
  font-weight: 400;
}
@media only screen and (max-height: 800px) {
  .hundred-percent-modal {
    font-size: 19px;
  }
}
.hundred-percent-modal h2 {
  font-size: 51px;
  line-height: 67px;
  margin: 0 0 1rem;
  color: #22d1ae;
}
@media only screen and (max-height: 800px) {
  .hundred-percent-modal h2 {
    font-size: 44px;
  }
}
@media only screen and (max-height: 800px) {
  .hundred-percent-modal h2 {
    line-height: 59px;
  }
}
.hundred-percent-modal .big-trophy {
  margin: 0 0 1rem;
}
.hundred-percent-modal .modal-content-wrap {
  height: 100%;
  overflow: auto;
}
.hundred-percent-modal .qi-and-message {
  text-align: left;
}
.load-case-modal {
  color: #222222;
}
.load-case-modal .modal-content {
  max-height: 400px;
}
.user-data-fail {
  color: #222222;
}
.user-data-fail .modal-content {
  width: 50%;
  height: 50%;
  font-weight: normal;
}
.default-modal {
  color: #222222;
  font-size: 25px;
  font-weight: 400;
}
@media only screen and (max-height: 800px) {
  .default-modal {
    font-size: 22px;
  }
}
.default-modal h2 {
  font-size: 33px;
  line-height: 67px;
  margin: 0 0 1rem;
  color: #22d1ae;
}
@media only screen and (max-height: 800px) {
  .default-modal h2 {
    font-size: 29px;
  }
}
@media only screen and (max-height: 800px) {
  .default-modal h2 {
    line-height: 59px;
  }
}
.default-modal .big-trophy {
  margin: 0 0 1rem;
}
.default-modal .modal-content-wrap {
  height: 100%;
  overflow: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.default-modal .qi-and-message {
  text-align: left;
}
.default-modal .modal-video {
  float: left;
  margin-right: 1em;
}
.default-modal .button-options {
  clear: both;
  padding-top: 2em;
}
.default-modal .footnote {
  font-size: 21px;
}
@media only screen and (max-height: 800px) {
  .default-modal .footnote {
    font-size: 19px;
  }
}
.ngvid-wrapper {
  position: relative;
}
.ngvid-wrapper video {
  width: 100%;
  height: auto;
}
.vid-loading {
  font-size: 40px;
  line-height: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 1em;
  position: absolute;
  border-radius: 15px;
  box-sizing: border-box;
  width: 50%;
  top: 25%;
  left: 25%;
}
.progress-outer {
  background: #ffffff;
  border-radius: 15px;
  border: 3px solid #ffffff;
  margin: 0 0 0 0.5em;
  -ms-flex: 1;
      flex: 1;
}
.progress-inner {
  font-size: 16px;
  background: #22d1ae;
  border-radius: 15px;
  min-width: 4em;
  line-height: 22px;
  min-height: 1.4em;
}
@media only screen and (max-height: 800px) {
  .progress-inner {
    font-size: 14px;
  }
}
@media only screen and (max-height: 800px) {
  .progress-inner {
    line-height: 20px;
  }
}
.patient {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 75%;
  height: 20%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 120px;
  position: relative;
  text-align: center;
  border: 1px solid;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.patient .patient-name {
  font-size: 1.6em;
  padding: 5px 0 3px;
}
.patient .patient-list-photo-wrapper {
  text-align: center;
  margin: 5px 12px 0;
  line-height: 0;
  -ms-flex: 1;
      flex: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.patient.active {
  border: 2px solid #ffffff;
}
.qitool {
  line-height: 1.4;
  margin: 0 0 1em;
}
.qitool img {
  display: block;
  visibility: hidden;
  margin: 0 auto;
}
.qitool-large {
  font-size: 20px;
}
@media only screen and (max-height: 800px) {
  .qitool-large {
    font-size: 17px;
  }
}
.qitool-small {
  font-size: 17px;
}
@media only screen and (max-height: 800px) {
  .qitool-small {
    font-size: 15px;
  }
}
.tutorial-attention {
  animation-duration: 0.4s;
  animation-name: attention;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.safety-attention {
  animation-duration: 0.4s;
  animation-name: attention-safety;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.patient-attention {
  animation-duration: 0.4s;
  animation-name: attention-patient;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.tutorial-instruction {
  font-weight: 700;
  font-size: 18px;
}
@media only screen and (max-height: 800px) {
  .tutorial-instruction {
    font-size: 16px;
  }
}
@keyframes attention {
  from {
    background: #00afec;
  }
  to {
    background: rgba(255, 255, 255, 0.9);
  }
}
@keyframes attention-safety {
  from {
    background: #a0a0a0;
  }
  to {
    background: rgba(255, 255, 255, 0.9);
  }
}
@keyframes attention-patient {
  from {
    background: #22d1ae;
  }
  to {
    background: rgba(255, 255, 255, 0.9);
  }
}
#guideButton,
#glossaryButton {
  padding: 0.5em 0.75em;
}
.tutorial-patient {
  transition: all 400ms linear;
}
.tutorial-modal {
  padding: 2em;
}
.tutorial-modal-content {
  width: 100%;
  box-sizing: border-box;
  background: white;
  color: black;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  overflow: auto;
  -ms-flex: 1;
      flex: 1;
  font-size: 21px;
  line-height: 45px;
}
@media only screen and (max-height: 800px) {
  .tutorial-modal-content {
    font-size: 19px;
  }
}
@media only screen and (max-height: 800px) {
  .tutorial-modal-content {
    line-height: 39px;
  }
}
.tutorial-modal-content .tutorial-content {
  text-align: left;
  height: 100%;
  overflow: auto;
  -ms-flex: 1;
      flex: 1;
}
.tutorial-correct {
  color: #22d1ae;
}
.hover-attention {
  cursor: pointer;
  color: #00afec;
  border-bottom: 1px dotted #222222;
}