.circle {
	border-radius: 50%;
}

.large-button {
    width: 200px;
    height: 190px;
    position: absolute;
    background: url('../images/transparent_button_sprite.png') no-repeat;
    background-position: -5px -5px;
    border: 0;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

.large-button:focus {
    background: url('../images/transparent_button_sprite.png') no-repeat;
    background-position: -5px -5px;
}

.large-button:active {
    background: url('../images/transparent_button_sprite.png') no-repeat ;
    background-position: -215px -5px;
}

.large-button:disabled,
.large-button:disabled:focus,
.large-button:disabled:active {
  background-position: -5px -5px; /* default position */
  cursor: not-allowed; /* optional visual cue */
}

.large-button-background {
    width: 188px;
    height: 174px;
    margin-top: 7px;
    margin-left: 6px;
    position: absolute;
}

.large-button-shadow {
    width: 200px;
    height: 190px;
    background: url('../images/transparent_button_shadow.png') no-repeat;
}

#page-title {
    margin: 0px 20px 25px;
    font-size: 50px;
    font-weight:bold;
}

#buzzer-button {
    width: 190px;
    margin: 0 auto 25px auto;
}

/* Add a gold border if it's a buzzer win to make the student feel like a winner */
.buzzer-win-theme .attendance-modal-content {
    border: 3px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Buzzer overlay message line: why the button is held, and how many tries the
   guest has left this round. Sits under the button, so the overlay stacks. */
.buzzer-overlay {
    flex-direction: column;
}

.buzzer-status {
    margin-top: 8px;
    min-height: 1.4em;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}