.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

body {
    overflow: hidden;
}

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

.chronverna {
    display: flex;
    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;

    flex-direction: row;

    justify-content: flex-end;
}

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

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

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

.current-player-area {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    transition: color 0.25s;
}

.player-label-area {
    text-align: center;
}

.active-player-name {
    font-size: 24px;
}

.active-player-status {
    font-size: 14px;
}

.clock-area {
    display: flex;
    align-items: center;
}

.clock {
    font-size: 72px;
}

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

.button-area {
    width: 100%;
    padding: 0 16px;
    text-align: center;
}

.gameplay-button-container {
    width: 100%;
}

.special-action-row {
    display: flex;
    flex-direction: row;
}

.grow-family-button {
    flex: 1;
    margin-right: 4px;
    font-size: 16px;
    height: 48px;
}

.take-start-player-button {
    flex: 1;
    margin-left: 4px;
    font-size: 16px;
    height: 48px;
}

.next-button {
    width: 100%;
    margin-top: 8px;
    height: 48px;
}

.active-players-area {
    padding: 0 16px;
}

.done-players-area {
    padding: 0 16px 16px 16px;
}

.player-list-label {
    display: flex;

    align-items: center;

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

.player-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

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

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

.player-item .timer {
    font-size: 16px;
    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;
}

/* Player colors */

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

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

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

.light-blue {
    background: #3b9c9c;
}

.dark-blue {
    background: #2b60de;
}

.purple {
    background: #a74ac7;
}

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

/* Setup */

.setup-wrapper {
    padding:  16px 8px 0px 8px;
    text-align: center;
}

.player-select-area {
    margin-top: 24px;
}

.player-select-row {
    display: flex;
    flex-direction: row;
    margin: 8px 0;
}

.player-select-row>* {
    margin: 0 4px;
}

.name-input {
    flex: 1 auto;
}

.color-select {
    flex: 0 0 33%;
}

.remove-player-button {
    flex: 0 auto;
}

.add-player-button {
    width: 100%;
}

.start-game-button-container {
    margin-top: 16px;
}