body{margin:0;color:#fff;font-family:Arial;background:url('../assets/building.jpg') center/cover fixed}
.overlay{position:fixed;inset:0;background:rgba(0,70,120,.72)}
*{position:relative;z-index:1}
header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px}
.logo{height:70px;background:#fff;padding:8px;border-radius:10px}
.current{text-align:center}
.ticket{font-size:100px;font-weight:bold}
main{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}
table{width:100%;color:#000000;font-size: 1.8em;}
td{padding:10px;border-bottom:1px solid rgba(255,255,255,.2)}
footer{position:fixed;bottom:0;left:0;right:0;background:#003f70;padding:10px}
.popup{
	position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #000;
    opacity: 0.9;}
.hidden{display:none}
.current {
    background: #fff;
    color: #005EA8;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
	opacity: 0.8;
}
.panel {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.left h2 {
    background: #005EA8;
}
.right h2 {
    background: #18C6A3;
}
.panel h2 {
    margin: 0;
    padding: 15px;
    color: #fff;
}

#currentName{
	font-size: 2em;
}

.date{
	font-size: 50%;
	font-weight: bold;
}

.footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;

    height:90px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 25px;

    background:rgba(0,40,80,.9);
    color:white;
}

.footer-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.qr-code{
    width:70px;
    height:70px;

    background:white;
    border-radius:8px;
    padding:4px;
}

.qr-text{
    font-size:14px;
    line-height:1.4;
}
#saver-screen{
    position:fixed;
    inset:0;
    background:#000;
    z-index:9999;

    display:flex;
    justify-content:center;
    align-items:center;
}

#saver-screen img{
    width:100%;
    height:100%;
    object-fit:cover;
}
@media(max-width:900px){main{grid-template-columns:1fr}.ticket{font-size:80px}}