@font-face {
  src: url("arimo-webfont.woff") format("woff");
  font-family: "arimoregular";
  font-weight: normal;
  font-style: normal;
}

body,
p {
  margin: 0;
}

body {
  font-family: "arimoregular", Cambria;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.header {
  font-size: 3vw;
  font-weight: 600;
  padding: 2vh 2vw 4vh 2vw;
  margin-bottom: 2vh;
  display: flex;
  justify-content: space-between;
}

.subheader {
  font-size: 2vw;
  padding: 2vh 2vw;
  /* text-align: center; */
}

.header,
.subheader {
  height: 5vh;
}

.footer {
  display: flex;
  height: 10vh;
}

.list-header {
  display: flex;
  padding-left: 2vw;
  padding-bottom: 2vh;
  height: 8%;
}

.list-header > div {
  display: flex;
  width: 50vw;
}

.header > p > span {
  color: #00b5d7;
  font-size: 3vw;
}

.error-list {
  width: 76vw;
  display: flex;
  align-items: center;
  background-color: #feeae9;
  padding: 1vw;
}

.error-list-title {
  font-size: 2.5vw;
  font-weight: 600;
}

.error-list-divider {
  color: #d50001;
  font-size: 2vw;
  margin-right: 1vw;
  margin-left: 1vw;
  display: flex;
  align-items: center;
}

.date-time {
  display: flex;
  background-color: black;
  color: white;
  width: 24vw;
}

.time {
  width: 45%;
  font-size: 3.5vw;
  padding-top: 0.4vh;
  padding-left: 1vw;
}

.date {
  width: 55%;
  font-size: 1.5vw;
  padding: 1vh 1vw;
}

.notice {
  display: flex;
  align-items: center;
  height: 12vh;
  margin-left: 2vw;
  font-size: 1.5vw;
  color: #00b5d7;
}

#qviewPageNumber {
  font-size: 2vw;
  margin: 1vh 2vw 0 0;
  color: rgb(100, 100, 100);
}

#qviewDoctorList {
  display: flex;
  flex-direction: column;
  padding-left: 2vw;
  height: 65vh;
}

#qviewDoctorList .column {
  /* display: flex; */
  /* align-items: center; */
  font-size: 1.5vw;
  height: 4vh;
  max-height: 4vh;
  font-weight: 600;
  margin-right: 0.5vw;
  padding: 2vh 0.5vw;
  text-align: center;
}

#qviewDoctorList .row {
  display: flex;
  margin-bottom: 1vh;
  width: 96vw;
}

#qviewDoctorList .column:first-child {
  width: 20vw;
  text-align: left;
}

#qviewDoctorList .column:not(:first-child) {
  width: 8vw;
  justify-content: center;
}

#qviewDoctorList .row:nth-child(odd) .column:not(:empty) {
  background-color: #bde4da;
}

#qviewDoctorList .row:nth-child(even) .column:not(:empty) {
  background-color: #9fd8cb;
}

#qviewDoctorList .column[data-error="true"] {
  background-color: red;
  color: white;
}

#qviewDoctorList .row[data-delayed="true"] .column:not(:empty) {
  background-color: orange;
  color: white;
}

#qviewDoctorList .row[data-delayed="true"] .column:first-child {
  padding: 0.2vh 0.5vw 3.8vh 0.5vw;
}

#qviewDoctorList
  .row[data-delayed="true"]
  .column:first-child:first-child::after {
  content: "\A DELAYED";
  font-size: 1.1vw;
  white-space: pre-line;
}

#qviewErrorList {
  display: flex;
  flex-grow: 1;
}

#qviewErrorList .column {
  font-size: 1.5vw;
  background-color: #fe7f7f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1vw;
  width: 8vw;
  height: 6vh;
  font-weight: 600;
}