/*
###########################################################
# EVENT
###########################################################
*/

/*
###########################################################
# SCREENS
###########################################################
*/

.screen-set-row {
    flex-wrap: nowrap;
}

.user-screen-content {
    --font-size: 100;
    font-size: calc(var(--font-size) * 1%)
}

.user-screen-content h2.set-title {
    font-size: calc(var(--font-size) / 100 * 1.6rem);
    margin-top: calc(var(--font-size) / 100 * 0.8rem);
}

.alert-message-text {
  display: inline-block;
  padding-right: 0;
  padding-left: 100%;
  white-space: nowrap;
  animation-name: scroll-rtl;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes scroll-rtl {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-200%,0,0);
  }
}

/*
###########################################################
# INPUT SCREENS - RESULT MODAL
###########################################################
*/
.input-screen-result-modal .result-button {
    border: 3px #000080 solid;
}
.input-screen-result-modal .admin-result-button {
    border: 3px #800000 solid;
}
.input-screen-result-modal .result-button.draw {
    color: #000080;
}
.input-screen-result-modal .result-button:hover,
 .input-screen-result-modal .admin-result-button:hover {
    color: #000080 !important;
}
.input-screen-result-modal .result-button:hover {
    background-color: yellow !important;
}
 .input-screen-result-modal .admin-result-button:hover {
    background-color: #ffc500 !important;
}
/*
###########################################################
# BOARDS/INPUT SCREENS - BOARD/PLAYER ROWS
###########################################################
*/
.grid-striped {
    display: grid;
    background-color: white;
}
.grid-header {
    padding: 0.25rem 0.5rem;
    background-color: #212529;
    color: white;
    font-weight: bold;
}
.grid-striped .board-row,
.grid-striped .player-row {
    display: contents;
}
.grid-striped .board-row > div,
.grid-striped .player-row > div {
    padding: 0.25rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.grid-striped > .board-row:nth-of-type(odd) > * {
    color: var(--bs-table-striped-color);
    background-color: rgba(0, 0, 0, 0.05);
}
.input-screen .board-row.editable {
    cursor: pointer;
}
.input-screen .board-row.result-not-set:hover, .input-screen .grid-striped>.board-row.result-not-set:hover > div {
    background-color: yellow;
}
.input-screen .board-row.result-set:hover, .input-screen .grid-striped>.board-row.result-set:hover > div {
    background-color: #ffffcc;
}
.input-screen .board-row.special-results-allowed.result-not-set:hover, .input-screen .grid-striped>.board-row.special-results-allowed.result-not-set:hover > div {
    background-color: #ffc500;
}
.input-screen .board-row.special-results-allowed.result-set:hover .input-screen .grid-striped>.board-row.special-results-allowed.result-set:hover > div {
    background-color: #fff2cd;
}
.time-control-modified .minutes,
.time-control-modified .seconds {
    color: red;
}
.player-cell.last_check_in_updated, .player-cell.last_illegal_move_updated,
.illegal-moves-cell.last_check_in_updated, .illegal-moves-cell.last_illegal_move_updated {
    color: red !important;
}
.board-row.last_result_updated > * {
    color: red !important;
}
/*
###########################################################
# PLAYERS SCREENS - ROWS
###########################################################
*/
/*
###########################################################
# RESULTS SCREENS - ROWS
###########################################################
*/
/*
###########################################################
# MENUS
###########################################################
*/
.screen-menu {
    font-size: x-large;
}
.screen-menu-item {
    color: red;
}
.screen-menu-item.selected {
    background-color: red;
    color: white;
}
.screen-menu-item:hover {
    background-color: #ffff00;
    color: #000080;
}
/*
###########################################################
# TIMERS
###########################################################
*/
.timer {
    font-size: x-large;
}