.hint, .warning, .waiting, .viewer-hint {
    padding: 1ex 1em;
    color: white;
    margin: auto;
    display: inline-block;
    border-radius: 1ex;
    /* margin-bottom: 1ex; */
    font-size: 1em;
    /* border: 2px solid rgba(255,255,255,1); */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    /*min-width: 20em;*/
}

@keyframes warning {
    0% {
        background-color: rgba(100, 152, 212, 0.8);
    }
    50% {
        background-color: rgba(216, 14, 0, 0.7);
    }
    100% {
        background-color: rgba(100, 152, 212, 0.8);
    }
}

.viewer-hint {
    background-color: rgba(100, 152, 212, 0.8);
}

.hint {
    background-color: rgba(100, 152, 212, 0.8);
    animation-name: warning;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-delay: 20s;
    animation-duration: 5s;
}

.hint .button, .hint button {
    background-color:  rgb(39, 95, 160);
}

.hint .button:hover, .hint button:hover {
    background-color:  rgb(78, 116, 158);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hint input[type='checkbox'] + label:hover,
.hint input[type='radio'] + label:hover {
    background-color:  rgb(78, 116, 158);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.waiting {
    background-color: rgba(0, 103, 79, 0.8);
}

.warning {
    background-color: rgba(216, 14, 0, 0.7);
}

.warning > .button, .warning > button {
    background-color:  rgb(87, 6, 0);
}

.bidding {
    padding: 20px;
}





#game-player-list {
    clear: both;
}

#game-mode {
    padding: 5px;
    color: white;
}

.game-type-options {
    font-size: 1.2em;
}

.game-type-options label {
    margin-right: 10px;
}