@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');
body, html, .fullheight {
  height: 100%;
  font-family: 'Nunito Sans', sans-serif;
}

body {
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 52%, rgba(255, 255, 255, 0.72) 68%, rgba(255, 255, 255, 0.55) 82%, rgba(255, 255, 255, 0.32) 100%),
    url("../img/MapBackground.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

h1 {
  font-size: calc(100% + 3vw + 3vh);
  font-weight: 900;
}

h3 {
  font-weight: 600;
}

.toplogo {
  height: 100%;
  max-height: calc(50px + 7vw + 7vh);
  width: auto;
}

.centerflex {
  justify-content: center;
  align-items: center;
  height: 100%;
}

.content-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

table {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

table th,
table td {
  background: rgba(255, 255, 255, 0.96);
}

/* The hero image */
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/post.jpg");
  height: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* The top image */
.top-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/post-small2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  color: white;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#road-list{
    float:left;
    list-style:none;
    margin-top:-3px;
    padding:0;
    width:190px;
    position: absolute;
    z-index:500;
}

#road-list li{
    padding: 10px;
    background: #f0f0f0;
    border-bottom: #bbb9b9 1px solid;
}

#road-list li:hover{
    background:#ece3d2;
    cursor: pointer;
}

.barcode {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 50px;
    transform: scale(1, 3);
    margin-top: 52px;
    margin-bottom: -20px;
}

.roadname {
    font-size: 25px;
    text-transform: uppercase;
}

.roadtext {
    padding: 0px;
    margin: 0px;
}

.container50 {
    display: inline-block;
    width: 49%;
    margin: auto;
    padding: 10px;
    vertical-align: top;
}

.wrapper {
    position: relative;
    text-align: center;
}
/* Style for mobile sizes */
@media (max-width: 750px) {
    .container50 {
        width: 90%;
    }
}

body.swal2-shown > [aria-hidden="true"] {
  transition: 0.1s filter;
  filter: blur(10px);
}

.receipt-container {
    width: 80mm;
    font-size: 12px;
    border: 2px solid;
    Margin: 10px;
    display: inline-block;
    font-family: sans-serif;
}

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

.nav-link:hover, .navbar-brand:hover, .active {
    text-decoration: underline;
    text-underline-offset: 5px;
}