* {
  font-family  : "Helvetica Neue",
                 Helvetica,
                 Arial,
                 sans-serif;
  font-style   : normal;
  font-variant : normal;
  touch-action : manipulation;
}

a {
  color : #ff6600;
}

a:active,
a:focus,
a:hover {
  color           : #ff6600;
  text-decoration : underline;
}

main {
  position            : fixed;
  top                 : 0;
  right               : 0;
  bottom              : 0;
  left                : 0;
  overflow-x          : hidden;
  overflow-y          : scroll;
  background-image    : url(../../images/back.jpg);
  background-repeat   : no-repeat;
  background-position : center center;
  background-size     : cover;
}

div.page-container {
  width  : fit-content;
  margin : 3rem auto;
}

div.page-container > img.logo {
  width: 300px;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

div.question-container {
  visibility    : visible;
  width         : 500px;
  min-width     : 30vw;
  max-width     : 90vw;
  padding       : 1rem;
  border-radius : .25rem;
  background    : white;
  box-shadow    : 0px 2px 3px 0px rgba(0,9,26,.125);
}

div.question-container.hide {
  visibility : hidden;
}

h1.question-header {
  display         : flex;
  margin-bottom   : 1rem;
  font-size       : 1.25rem;
  font-weight     : bold;
  justify-content : space-between;
  line-height     : 1.75rem;
}

div.question-container p {
  margin-bottom : 1rem;
}

div.question-container h3 {
  margin-bottom : 1rem;
  font-weight   : bold;
}

.btn {
  text-align : left;
}

.question button {
  margin-bottom: 5px;
}

button:disabled {
  cursor: not-allowed;
}

button.btn-next {
  position      : relative;
  padding-right : 2.5rem;
}

button.btn-next::after {
  content          : '';
  display          : block;
  position         : absolute;
  top              : calc(50% - 6px);
  right            : 1rem;
  width            : 12px;
  height           : 12px;
  background-image : url('../../svg/plane.svg');
  transform        : rotate(45deg);
}

button.btn-prev {
  position     : relative;
  padding-left : 2.5rem;
}

button.btn-prev::after {
  content          : '';
  display          : block;
  position         : absolute;
  top              : calc(50% - 6px);
  left             : 1rem;
  width            : 12px;
  height           : 12px;
  background-image : url('../../svg/plane.svg');
  transform        : rotate(225deg);
}

.question.q-1 h3 {
  position: relative;
}

.more-tickets-button {
  position: absolute;
  right: 0;
}

#more-tickets-collapse {
  margin-bottom: 1rem;
}

.pre-icon {
  display             : inline-block;
  width               : 16px;
  height              : 16px;
  margin-right        : .75rem;
  background-repeat   : no-repeat;
  background-position : 50%;
  background-size     : 100% 100%;
  vertical-align      : middle;
}

.icon-telephone {
  background-image : url('../../svg/call.svg');
}

.icon-email {
  background-image : url('../../svg/mail.svg');
}

.nav-btn-bar {
  display         : flex;
  width           : 100%;
  margin-top      : 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.1);
  justify-content : space-between;
}

.nav-btn-bar.remove {
  display : none;
}

.nav-btn-bar button {
  font-size: 85%;
}

.form-check {
  padding       : .375rem .75rem .375rem 2rem;
  border        : 1px solid #ced4da;
  border-radius : 3px;
  font-size     : 1rem;
  line-height   : 1.5;
  transition    : color .15s ease-in-out,
                  background-color .15s ease-in-out,
                  border-color .15s ease-in-out,
                  box-shadow .15s ease-in-out;
  cursor        : pointer;
}

.form-check * {
  cursor        : pointer;
}

.form-check + .form-check {
  margin-top : .5rem;
}

.form-check-label {
  width        : 100%;
  padding-left : .5rem;
}

section {
  margin-top: 1rem;
}

.q-31 {
  position: relative;
}

.q-31 .bootstrap-datetimepicker-widget {
  box-shadow: none;
  border: none;
  width: 100% !important;
}

.q-31 .bootstrap-datetimepicker-widget .active {
  border-color: white !important;
}

.q-31 .bootstrap-datetimepicker-widget table tr td.today.day:hover {
  background-color: white !important;
  color: #212529 !important;
}

.q-31 .bootstrap-datetimepicker-widget table tr td.today {
  background: white !important;
}

.q-31 #spinner-box.hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.q-31 #spinner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 243px;
  position: absolute;
  top: 40px;
  background-color: rgba(255,255,255,0.8);
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease-out,
              visibility .15s ease-out;
}

.q-31 #date-spinner {
  display: inline-block;
  position: relative;
  width: 72px;
  height: 72px;
}

.q-31 #date-spinner div {
  position: absolute;
  border: 4px solid #000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.q-31 #date-spinner div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

.datetimepicker {
  padding: .75rem;
}

.thankyou {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.thankyou img {
  width: 100px;
}

.thankyou div {
  width: calc(100% - 125px);
  font-size: 10.5px;
  line-height: 13px;
}

.time-suggestions button.btn {
  margin-right: 5px;
}

#fly-date td {
  border: 6px solid white !important;
}

#fly-date td.active {
  outline: 1px solid black;
}

#fly-date td.day:not(.disabled).active,
#fly-date td.day:not(.disabled) {
  background-color: lightgreen !important;
  color: #212529 !important;
}

#fly-date td.day.red:not(.disabled).active,
#fly-date td.day.red:not(.disabled) {
  background-color: orangered !important;
  color: white;
}

.pax-weights {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../../images/c172-seating.png");
  height: 0;
  padding-bottom: 108.25%;
  margin-top: -10%;
  position: relative;
}

.pax-weights input {
  text-align: right;
  max-width: 85px;
  padding-right: 34px;
}

.pax-weights div .btn {
  position: absolute;
  width: 100%;
  z-index: 1;
  text-align: center;
  background: lightgreen !important;
}

.pax-weights .btn.chosen-seat {
  z-index: -1;
}

.pax-weights .pax-1::after,
.pax-weights .pax-2::after,
.pax-weights .pax-3::after {
  content: 'kg';
  position: absolute;
  right: 13px;
  bottom: 7px;
}

.pax-1 {
  position: absolute;
  left: 58%;
  bottom: 58%;
}
.pax-2 {
  position: absolute;
  right: 58%;
  top: 46%;
}
.pax-3 {
  position: absolute;
  left: 58%;
  top: 46%;
}

.pax-alert-container {
  width: 100%;
  z-index: 1;
  position: relative;
  margin-top: 2rem;
}

.overweight-95-message,
.overweight-message {
  display: none;
}

.overweight-95-message.show,
.overweight-message.show {
  display: block;
}

.weekend-message,
.free-slots {
  margin-top: 1rem;
  padding: .25rem .75rem;
  font-size: 80%;
}

.extra-pax {
  background: white;
  text-align: left;
}

.recap-costing tr td:last-child,
.recap-costing tr th:last-child {
  text-align: right;
}

.recap-milieubelasting {
  line-height: 1;
  margin-bottom: 1.25rem !important;
  margin-top: -0.75rem;
}

.q-35 p {
  margin-bottom: 0 !important;
}

.q-37 h2 {
  font-weight: 200;
  font-size: 1.9rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.q-37 h3 {
  margin-bottom: 3rem !important;
}

.uppercase {
  text-transform: uppercase;
}

@media (max-width: 523.89px) {
  .more-tickets-button {
    display: block;
    position: relative;
  }
}

@media (max-width: 499.98px) {
  button small {
    display: block;
  }

  .q-2 h3 small {
    display: block;
    margin-left: 32px;
  }
}

@media (max-width: 399.98px) {
  button[data-name="ticket"] {
    font-size: 70%;
  }
}

@media (max-width: 349.98px) {
  .q-2 h3 {
    font-size: 90%;
    line-height: 90%;
  }
}




.clean {
  background-color: white;
}

.clean main {
  background-image: none;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.clean footer,
.clean .logo {
  display: none;
}

.clean div.page-container {
  margin: 0 auto;
}

.clean div.question-container {
  max-width: 100vw;
  box-shadow: none;
}