*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{margin:0;padding:20px;background:#f4f4f4;color:#333}
a{text-decoration:none;color:#003366;font-weight:bold}
a:hover{color:#ff7a00}
button{background:#ff7a00;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}
button:hover{background:#e56c00}
input{padding:8px;border:1px solid #ccc;border-radius:4px;margin:6px 0}
.login-box{width:300px;margin:80px auto;background:#fff;padding:20px;border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,.1);text-align:center}
.nav a{margin-right:15px}
.ticket{display:inline-block;background:#fff;padding:8px;margin:10px;border:2px solid #ff7a00;border-radius:4px}
.ticket table{border-collapse:collapse}
.ticket td{border:1px solid #003366;width:30px;height:26px;text-align:center;font-weight:bold}
.call-grid a{display:inline-block;width:42px;height:42px;line-height:42px;text-align:center;margin:4px;background:#ccc;border-radius:50%}
.call-grid a.called{background:#ff7a00;color:#fff}
.board{max-width:720px;margin:auto;text-align:center}
.big-number{font-size:80px;color:red;margin-bottom:20px}
.board span{display:inline-block;width:40px;height:40px;line-height:40px;margin:4px;border-radius:50%;background:#ccc;font-weight:bold}
.board span.called{background:#ff7a00;color:#fff}
@media(max-width:600px){input{width:100%}}

.highlight {
    background: #fff3b0;
    border: 3px solid #ff7a00;
}
/* ===== TICKET HEADER ===== */
.ticket-header{
    text-align:center;
    margin-bottom:6px;
}

.ticket-header .logo{
    width:70px;
    display:block;
    margin:0 auto 4px;
}

.ticket-header .company{
    font-weight:bold;
    font-size:14px;
    color:#003366;
}

.ticket-header .contact{
    font-size:11px;
    margin-bottom:4px;
}

.ticket-header .ticket-no{
    font-size:14px;
    font-weight:bold;
    margin-top:3px;
}

/* ===== TICKET FOOTER ===== */
.ticket-bottom{
    text-align:center;
    font-size:9px;
    color:#555;
    margin-top:4px;
}
.ticket-box{
    display:inline-block;
    margin:10px;
    padding:8px;
    background:#fff;
    border:2px solid #ccc;
}
.ticket-box.win{
    border-color:#27ae60;
}
.ticket-box.near{
    border-color:#e67e22;
}

.ticket-grid{
    border-collapse:collapse;
    margin-top:5px;
}
.ticket-grid td{
    width:28px;
    height:28px;
    text-align:center;
    font-weight:bold;
    border:1px solid #999;
}

.ticket-grid td.empty{
    background:#f0f0f0;
}

.ticket-grid td.called{
    background:#27ae60;
    color:#fff;
}

.ticket-grid td.missing{
    background:#fff;
    color:#000;
}

.ticket-grid td.blink{
    background:#e74c3c;
    color:#fff;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%{opacity:1}
    50%{opacity:0.4}
    100%{opacity:1}
}
/* SOFT BLINK FOR CALLED NUMBERS */
@keyframes softBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0.45; }
    100% { opacity: 1; }
}

/* STRONG BLINK FOR LAST NUMBER */
@keyframes strongBlink {
    0%   { transform: scale(1); opacity:1 }
    50%  { transform: scale(1.2); opacity:.6 }
    100% { transform: scale(1); opacity:1 }
}

.numbers span.called{
    background:#ff7a00;
    animation: softBlink 1.5s infinite;
}

/* LAST NUMBER SPECIAL */
.numbers span.last{
    background:#ff0000 !important;
    animation: strongBlink 0.8s infinite;
}