:root {
  --custom-color-in: #6161dd;
  --custom-color-out: #184500;
}

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

.qr-body{
    background-color: #ffff;
}

.qr-header-in {
    width: 50%;
    float: left;
    margin: 0px 5px 0px 0px;
}

.qr-table-in-text {
   width: 100%;
   background-color: var(--custom-color-in);
   text-align: center;
   color: white;
   font-size: calc(18px + 1vw);
   box-shadow: 2px 6px 9px -4px #000000;
   margin: 0px 4px 15px 0px;
}

.qr-header-out {
    width: 24%;
    float: left;
    margin: 0px 5px 0px 0px;
}

.qr-table-out-text {
   width: 100%;
   background-color: var(--custom-color-out);
   text-align: center;
   color: white;
   font-size: calc(18px + 1vw);
   box-shadow: 2px 6px 9px -4px #000000;
   margin: 0px 0px 15px 0px;
}

.qr-header-info {
    width: 24%;
    float: left;
}

.qr-table-info-text {
   width: 100%;
   background-color: #918322;
   text-align: center;
   color: white;
   font-size: calc(18px + 1vw);
   box-shadow: 2px 6px 9px -4px #000000;
}

.qr-table-in {
    float: left;
    width: 50%;
    height: 90vh;
    -moz-column-width: 50px;
    column-width: 180px;
    -moz-column-gap: 0;
    column-gap: 0;
    -moz-column-fill: auto;
    column-fill: auto;
    margin: 0px 0px 0px 10px
}

.qr-table-in-value{
    width: 180px;
    height: 70px;
    margin: 0;
    outline-offset: -1px;
    font-size: 400%;
    color: var(--custom-color-in);
    text-align: center;
    box-shadow: 0px 2px 5px -4px #000000;
}

.qr-table-out {
    height: 90vh;
    -moz-column-width: 50px;
    column-width: 250px;
    -moz-column-gap: 0;
    column-gap: 0;
    -moz-column-fill: auto;
    column-fill: auto;
    margin: 0px 0px 0px 10px
}

.qr-table-out-value{
    width: 90%;
    height: 90px;
    margin: 0;
    outline-offset: -1px;
    font-size: 500%;
    color: var(--custom-color-out);
    text-align: center;
    box-shadow: 0px 2px 5px -4px #000000;
    margin: 0px 0px 0px 20px
}

.qr-footer{
  right: 15px;
  bottom: 0;
  position: absolute;
}

#datetime{
    font-size: 300%;
    margin: 0;
}

.qr-table-info img {
    width: 80%;
    margin: 30px auto 20px;
    display: block;
}

.qr-table-info p {
    text-align: center;
    font-size: 150%;
    display: block;
    margin: 50px 0px 0px 0px;
}