html {
  font-size: 1vw
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

body, p {
  margin: 0
}

body {
  background: #F2F6F8
}

.content {
  margin: 40px 80px 0
}

.content .content {
  margin-left: 0;
  margin-right: 0
}

.stage-welcome {
  background: #F5A623
}

.stage-finish {
  background: #7AD420
}

.stage-welcome .hand {
  margin: 0 auto;
  display: block
}

.stage-welcome .scan-sign {
  text-align: center;
  margin: 7% 0 6%
}

.stage-finish .big-check {
  display: inline-block;
  margin-top: 8%
}

.stage-finish .white-text {
  margin-top: 4%
}

.stage-finish .button-wrap {
  margin-top: 12%
}

.stage-finish-block {
  text-align: center
}

.alert-bar {
  background: #F5A623 url(../assets/images/alert.266300bd.png) 80px 36px no-repeat;
  height: 145px
}

.white-text {
  color: #fff;
  text-shadow: 0 2px 1px rgba(0, 0, 0, .12)
}

.gray-text {
  color: #787D80
}

.black-text {
  color: #222
}

.orange-text {
  color: #D98A0B
}

.white-text, .gray-text, .black-text, .orange-text {
  font-size: 3.6em;
  line-height: 119%
}

.white-text.medium, .gray-text.medium, .black-text.medium, .orange-text.medium {
  font-size: 2.4em;
  line-height: 125%
}

.white-text.huge, .gray-text.huge, .black-text.huge, .orange-text.huge {
  font-size: 4.4em;
  line-height: 100%
}

.white-text.small, .gray-text.small, .black-text.small, .orange-text.small {
  font-size: 1.7em;
  line-height: 140%
}

.bolder {
  font-weight: 600
}

button {
  border-radius: 8px;
  background-image: -o-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: -moz-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: -ms-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: linear-gradient(-179deg, #7AD420 2%, #6EBF1D 97%);
  border: 2px solid #67B31B;
  font-size: 2.6em;
  color: #fff;
  line-height: 119%;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  padding: .5% 3%;
  min-width: 336px;
  margin: 0 10px
}

button.global-clear {
  min-width: 200px;
  font-size: 1.9em;
  line-height: 100%;
  position: absolute;
  right: 20px;
  bottom: 50px;
  background-image: -o-linear-gradient(-89deg, #d4d4d4 2%, #bdbdbd 97%);
  background-image: -moz-linear-gradient(-89deg, #d4d4d4 2%, #bdbdbd 97%);
  background-image: -ms-linear-gradient(-89deg, #d4d4d4 2%, #bdbdbd 97%);
  background-image: linear-gradient(-179deg, #d4d4d4 2%, #bdbdbd 97%);
  border: 2px solid #b3b3b3
}

button.disabled {
  border-radius: 8px;
  background: #AFB6BC;
  border: 2px solid #A2A8AD
}

button.checkin {
  margin-left: auto;
  margin-right: auto;
  display: block
}

.stage-finish button {
  border-radius: 8px;
  background-image: -o-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: -moz-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: -ms-linear-gradient(-89deg, #7AD420 2%, #6EBF1D 97%);
  background-image: linear-gradient(-179deg, #7AD420 2%, #6EBF1D 97%);
  border: 2px solid #67B31B;
  margin: 0
}

.stage-finish .button-wrap {
  border-radius: 16px;
  background: #E4F6D3;
  padding: 16px;
  display: inline-block
}

.bookinginfo {
  padding: 16px;
  margin-top: 1em;
  position: relative;
  overflow: hidden
}

.clickable-bookings .bookinginfo {
  border-radius: 10px;
  background-image: -o-linear-gradient(-89deg, #fff 0%, #F2F2F2 100%);
  background-image: -moz-linear-gradient(-89deg, #fff 0%, #F2F2F2 100%);
  background-image: -ms-linear-gradient(-89deg, #fff 0%, #F2F2F2 100%);
  background-image: linear-gradient(-179deg, #fff 0%, #F2F2F2 100%);
  border: 1px solid #B4BCBF;
  -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15)
}

.future-bookings {
  background: #fff;
  -moz-box-shadow: 0 4px 0 0 #E1E4E6;
  box-shadow: 0 4px 0 0 #E1E4E6
}

.bookinginfo dl {
  margin: 0 0 .3em;
  padding: 0
}

.bookinginfo dl dt, .bookinginfo dl dd {
  display: inline-block;
  vertical-align: top;
  padding: 0
}

.bookinginfo dl dd {
  margin: 0 .5em 0 0
}

.bookinginfo dl dt {
  width: 20rem;
  text-align: right;
  margin: 0 2rem 0 0;
  text-transform: uppercase
}

.bookinginfo .name {
  margin-bottom: 1em
}

.clickable-bookings .bookinginfo .checkin-circle {
  display: inline-block;
  position: absolute;
  background: url("../assets/images/checkin-circle.a6cd3a74.svg") no-repeat center center;
  width: 8rem;
  background-size: 70%;
  height: 100%;
  top: 0;
  left: 0
}

.checkin-selected .bookinginfo .checkin-circle, .bookinginfo .checkin-mark {
  display: none
}

.checkin-selected .bookinginfo .checkin-mark, .attended .bookinginfo .checkin-mark {
  display: inline-block;
  position: absolute;
  width: 8rem;
  height: 100%;
  background: #7AD320 url("../assets/images/booking-mark.e58ef941.svg") no-repeat center center;
  background-size: 70%;
  top: 0;
  left: 0
}

.terminal-info {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  height: 50px;
  overflow: hidden
}

.terminal-info span.terminal-info-data {
  padding-top: 10px;
  padding-left: 10px;
  display: block;
  height: 50px;
  background: #F2F6F8;
  font-family: consolas, Courier, monospace
}

.terminal-info-data span {
  margin-right: 1em
}

.touch-the-screen {
  text-align: center
}

.touch-the-screen button {
  margin-top: 20%
}