body {
    padding: 0;
    margin: 0;
    background-color: #F7F8F9;
    font-family: Arial;
}

#page {
    text-align: center;
    margin: 2em;
    background: #fff;
    padding: 2em;
    border: solid 1px #bbb;
    box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
}

#logo img {
    width: 230px;
    max-width: 100%;
}

#youreinqueue {
    font-weight: bold;
}

#youreinqueuespecific {
    font-weight: bold;
    display: none;
}

#endtimebox {
    display: none;
}

#endtimediff {
    font-weight: bold;
}

#progress {
    width: 100%;
    height: 2em;
    background-color: #ddd;
    overflow: hidden;
    box-shadow: inset 0 0 0.5em 0 #999;
    border: solid 1px #333;
    -webkit-animation: pgkf 1s linear infinite;
    -moz-animation: pgkf 1s linear infinite;
    -ms-animation: pgkf 1s linear infinite;
    animation: pgkf 1s linear infinite;
    animation-direction: normal;
    background: repeating-linear-gradient(135deg, rgba(192, 192, 192, 0.85) 0, rgba(192, 192, 192, 0.85) 5px, transparent 5px, transparent 10px);
    -ms-background-size: 200% 200%;
    background-size: 200% 200%;
}

@keyframes pgkf {
    0% {
        background-position: -14.14213562373095px -14.14213562373095px;
    }

    100% {
        background-position: 0 0;
    }
}

#barbefore {
    width: 5%;
    height: 100%;
    -webkit-transition: width 1s cubic-bezier(0.9, 0, 0.70, 1);
    -moz-transition: width 1s cubic-bezier(0.9, 0, 0.70, 1);
    -o-transition: width 1s cubic-bezier(0.9, 0, 0.70, 1);
    -ms-transition: width 1s cubic-bezier(0.9, 0, 0.70, 1);
    transition: width 1s cubic-bezier(0.9, 0, 0.70, 1);
    background: linear-gradient(180deg, rgba(196, 229, 162, 0.85) 0, rgba(255, 255, 255, 0.85) 3%, rgba(164, 215, 122, 0.85) 12%, rgba(62, 181, 81, 0.85) 99%);
    border-right: solid 1px #000;
}

#lastupdated {
    font-size: 0.8em;
    color: #999999;
}