body {
  font-family: 'Roboto', sans-serif;
  color: white; }

h1, h2, h3 {
  color: #dc9c13; }

.top {
  background: #182849;
  height: 80vh;
  padding: 0 5vw;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 40vh; }

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "Search Seats Camera";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 15vh;
  background: #dc9c13;
  border-top: 3px solid #a2730e;
  color: #182849;
  font-size: 2em;
  position: fixed;
  bottom: 0px;
  z-index: 99999; }

.Search {
  grid-area: Search; }

.Seats {
  grid-area: Seats; }

.Camera {
  grid-area: Camera; }

#qr-reader {
  width: 80%;
  margin: 0 auto; }
  #qr-reader video {
    display: block;
    margin: 20px auto 0;
    border: 10px solid grey;
    border-radius: 20px; }

.settings-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #dc9c13;
  color: #182849;
  width: 45px;
  height: 40px;
  font-size: 2em;
  text-align: center;
  border-radius: 50px;
  padding-top: 5px; }

h2 {
  color: #dc9c13;
  font-size: 2em; }

p {
  color: white;
  font-size: 1em; }

#settings {
  display: block;
  background-color: #1f335c;
  padding: 5vh 5vw;
  width: 70vw;
  margin: 0 auto; }
  #settings ul {
    margin: 0px;
    padding: 0px; }
    #settings ul li {
      background-color: #dc9c13;
      border-bottom: 2px solid #a2730e;
      color: #182849;
      font-size: 1.6em;
      margin-bottom: 10px;
      list-style-type: none;
      text-align: center;
      padding: 5px; }

#password input {
  width: 90%;
  padding: 10px 5%;
  margin-top: 10px; }

#password button {
  display: block;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: #1182d8;
  color: white;
  margin-top: 10px;
  border: 0px;
  border-radius: 10px; }

#camera, #search, #results, #seats, #settings {
  display: none; }

#search {
  display: block; }

#notification {
  display: block;
  position: fixed;
  top: 10px;
  right: -100%;
  padding: 10px;
  width: 80%;
  z-index: 9999;
  border-radius: 10px 0 0px 10px; }
  #notification p {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    font-size: 1.2em; }

.notificationShow {
  display: block;
  animation: slideon 10s forwards; }

@keyframes slideon {
  0% {
    right: -100%; }
  5% {
    right: 0; }
  95% {
    right: 0; }
  100% {
    right: -100%; } }

.notificationHide {
  animation: slideoff 5s forwards; }

@keyframes slideoff {
  100% {
    right: -100%; } }

#notification.success {
  background-color: green;
  color: white; }

#notification.fail {
  background-color: red;
  color: white; }

#railwayReminder {
  width: 60vw;
  left: 15vw;
  z-index: 999;
  position: absolute;
  top: 20vh;
  background-color: #dc9c13;
  padding: 5vh;
  box-shadow: 5px 5px 28px 5px #000000;
  display: none; }
  #railwayReminder p {
    color: #182849;
    text-align: center;
    font-size: 2em; }

#search form {
  display: block;
  width: 100%;
  margin: 0 auto; }
  #search form label {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    color: white;
    font-size: 1.8em; }
  #search form input {
    display: block;
    width: 90%;
    padding: 10px 5%;
    border-radius: 10px;
    background-color: #1f335c;
    border: 0px;
    color: white;
    margin-top: 10px; }
  #search form input:focus {
    background-color: white;
    color: #182849; }
  #search form button, a.view-order, .goodyBagCollected {
    color: #182849;
    background-color: #dc9c13;
    border: 2px solid #a2730e;
    font-size: 2em;
    padding: 10px 5%;
    display: block;
    border-radius: 10px;
    border: 0px;
    width: 90%; }
    
    .goodyBagCollected {
      background-color: #2531C8;
      color: white;
      margin-top: 20px;
    }
  #search form button:hover, a.view-order:hover, .goodyBagCollected:hover {
    background-color: #a2730e; }
    
    a.view-order, .goodyBagCollected { 
        text-align: center;
        text-decoration: none;
    }
    
    .goodyBagCollected, #search form button {
        width: 100%;
    }

.order-status.fa-exclamation-circle {
  color: #f9af2f; }

.order-status.fa-check-circle {
  color: #49d32a; }

.result {
  margin-bottom: 20px;
  border-bottom: 3px solid #1f335c; }
  .result table {
    width: 100%; }
    .result table th {
      color: #dc9c13;
      width: 30%;
      padding: 10px 0;
      font-weight: bold; }
    .result table tr:nth-child(even) {
      background-color: #1f335c; }
    .result table td {
      padding-left: 5px; }