body {
    overflow: hidden;
}

*, p {
    margin: 0;
    padding: 0;
    font-family: "Verdana";
}

.timer-mystica {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    -webkit-flex-direction: column;

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 20px;

    transition: background 0.25s;
}

.meta-button-area {
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;

    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.meta-button-area .spacer {
    flex: 1;
    -webkit-flex: 1;
}

.redo-button {
    margin-right: 24px;
}

.undo-button {
    margin-right: 6px;
}

.current-player-area {
    flex: 1;
    -webkit-flex: 1;

    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    -webkit-flex-direction: column;

    align-items: center;
    -webkit-align-items: center;

    transition: color 0.25s;
}

.active-faction-label {
    padding-top: 48px;
    font-size: 24px;
}

.clock-area {
    flex: 1;
    -webkit-flex: 1;

    display: flex;
    display: -webkit-flex;

    align-items: center;
    -webkit-align-items: center;
}

.clock {
    font-size: 96px;
}

.clock-subsecond {
    font-size: 32px;
}

.button-area {
    width: 100%;
    padding-bottom: 48px;

    display: flex;
    display: -webkit-flex;

    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.pass-button {

}

.next-button {
    padding-left: 48px;
    padding-right: 48px;
}

.active-players-area {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
}

.passed-players-area {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
}

.player-list-label {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    -webkit-align-items: center;

    font-size: 18px;
    height: 36px;
}

.player-item {
    display: flex;
    display: -webkit-flex;

    justify-content: space-between;
    -webkit-justify-content: space-between;

    align-items: center;
    -webkit-align-items: center;

    height: 36px;
    padding-left: 16px;
    padding-right: 16px;
}

.player-item .faction-label {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 0;
}

.player-item .timer {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 0;
}

.slide-up-enter {
    position: relative;
    opacity: 0.01;
    top: 24px;
}

.slide-up-enter.slide-up-enter-active {
    opacity: 1;
    top: 0;
    transition: opacity 0.25s ease-in, top 0.25s ease-in;
}

/* Faction background colors */

.gray {
    background: rgb(192, 192, 192);
}

.red {
    background: rgb(240, 128, 128);
}

.yellow {
    background: rgb(240, 240, 128);
}

.brown {
    background: rgb(176, 128, 64);
}

.black {
    background: rgb(64, 64, 64);
}

.blue {
    background: rgb(96, 192, 240);
}

.green {
    background: rgb(128, 240, 128);
}

.white {
    background: rgb(224, 240, 255);
}

.orange {
    background: rgb(240, 192, 96);
}

.text-light {
    color: rgb(192, 192, 192);
}

.text-dark {
    color: black;
}

/* Setup */

.faction-select-wrapper {
    padding-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

.faction-select-wrapper>* {
    margin-bottom: 16px;
}