.noselect {
  cursor: default;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Fixes problem of body width not updating properly after screen rotate on mobile */
html, body {
  overflow-x: hidden;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.status-shim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background-color: var(--bg-color);
  z-index: 1000;
}

.feature3 {
  min-height: 100vh;
}

#chat-tabContent .tab-pane {
  max-height: 100%;
  min-height: 100%;
}

.chat-scroll-container {
  overflow-y: auto;
}
.chat-text {
  width: 100%;
}
.chat-text .chat-message {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-text strong {
  font-weight: bold;
}
.chat-text-suffix {
  font-style: italic;
}

#collapse-chat-arrow {
  display: none;
}
@media (min-width: 768px) {
  #collapse-chat-arrow {
    display: none !important;
  }
}

.chat-info {
  display: none;
  height: 31px;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: 1px solid;
}
.chat-info .btn-outline-secondary {
  font-weight: bold;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .game-chat-info .chat-members-text {
    display: none;
  }
}
.chat-members-text {
  display: block;
  font-style: italic;
  margin-right: 6px;
}
.chat-members-tooltip .tooltip-inner {
  max-width: none;
}
.chat-members-list {
  display: flex;
  gap: 16px;
}

#add-remove-channels {
  padding-left: 0.75rem; 
  padding-right: 0.75rem; 
  padding-top: 0.5rem; 
  padding-bottom: 0.5rem;
}
#add-remove-channels button {
  white-space: nowrap; 
  --bs-btn-border-radius: 0.9rem;
}

.modal-table th {
  user-select: none;
}
.modal-table td,
.modal-table th {
  white-space: pre;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}
.modal-table th.text-end,
.modal-table td.text-end {
  padding-inline-start: 1rem; 
  padding-inline-end: 1rem;
}

.sort-header-wrapper {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  gap: 0.75rem;
}
.sortable-column {
  cursor: pointer;
}
.sortable-column i {
  opacity: 0.3;
}
.sortable-column.sort-primary i {
  opacity: 0.6;
}

.modal-table thead {
 position: sticky; 
 top: 0;
 box-shadow: 0 1px 0 var(--box-shadow-color);
}

#channels-modal table td:nth-child(2),
#channels-modal table th:nth-child(2) {
  text-align: center;
}

.dialog-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

#fixed-dialog-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

.game-status {
  font-weight: bold;
}
.game-status .game-id {
  font-weight: normal;
}
.opening-name {
  text-align: center;
}
.game-watchers {
  white-space: pre-wrap;
}

#left-panel {
  height: 502px;
}
#left-panel.list-view-showing {
  height: 200px;
}
#left-panel-bottom {
  height: 192px;
  width: 100%;
}

.chat-text strong.mine {
  font-weight: bold;
}
.chat-text strong.mention {
  font-weight: bold;
}
.chat-text strong.chat-notification {
  font-style: italic;
}
.chat-text span.timestamp {
  font-size: 0.75em;
  font-variant: small-caps;
}
.chat-text a {
  text-decoration: none;
}

#chat-scroll-button {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

#right-col {
  min-width: 374px;
}

@media (min-width: 768px) {
  body.chat-hidden #right-col {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
  }
  body.chat-hidden #main-row {
    padding-top: var(--right-col-height, 3.5rem);
  }
  body.chat-hidden #left-col {
    width: 50%;
    flex-shrink: 0;
    padding-left: 2rem;
    padding-right: 1rem;
  }
  body.chat-hidden #mid-col {
    width: 50%;
    flex-shrink: 0;
    padding-left: 1rem;
    padding-right: 2rem;
  }
}

#fake-input-text:focus-within {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
#input-text {
  overflow-x: hidden;
  resize: none;     
  border: none;
  box-shadow: none;
  padding-right: 0.375rem;
  background-color: transparent;
  min-height: calc(1.5em + .75rem);
}

@keyframes flash {
  0%, 100% { background-color: var(--form-control-bg, white); }
  50% { background-color: var(--flash-color, #ffcccc); } 
}
.flash {
  animation: flash 0.3s ease;
}

#emoji-button-container {
  align-self: end;
}
#emoji-button {
  font-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding-left: 0.375rem;
  border: none;
}
#emoji-button svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
#emoji-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: end;
  justify-content: end;
  right: 0;
  bottom: 100%;
  z-index: 6;
  visibility: hidden;
}
.emoji-panel-arrow {
  position: relative;
  width: 0;
  height: 0;
  right: 0.5rem;
  bottom: 1px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid; 
}

.counter-number {
  font-size: 8px;
}

.btn-toolbar .btn {
  margin-right: 10px;
}
.btn-toolbar > :last-child.btn, .btn-toolbar > :last-child .btn {
  margin-right: 0;
}

#session-status {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.name {
  display: inline-block;
  white-space: nowrap;
  font-size: 1.6rem;
  line-height: 21px;
  padding: 0.5rem;
}

.clickable-user {
  cursor: pointer;
}

.captured {
  white-space: nowrap;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.captured-piece {
  padding-top: 0.35em;
  padding-bottom: 0.65em;
  line-height: 2.6em;
}

.captured .captured-piece-img {
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  margin: -15px -5px 0 2px;
  width: 23px;
  height: 23px;
  opacity: 0.6;
  pointer-events: none;
}

.captured small {
  position: relative;
  left: -10px;
  top: 12px;
  opacity: 0.6;
}

.clock {
  align-items: baseline;
  padding-left: 15px;
  padding-right: 15px;
}

.clock-time {
  font-size: 1.6rem;
}
.fractional-clock-time {
  font-size: 1.0rem;
}

.top-panel, .bottom-panel {
  height: 3.5rem;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-shrink: 0;
}

.setup-board {
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: calc(min(var(--panel-width) / 32, var(--panel-height) / 3.5));
}
.setup-board-white::after, .setup-board-black::after {
  all: unset;
}
.setup-board-buttons {
  min-width: 8.25em;
}
.setup-board-buttons button {
  font-size: calc(min(var(--panel-width) / 16, var(--panel-height) / 1.8));
  padding: 0.25em;
}
.color-to-move-button {
  font-size: calc(min(var(--panel-width) / 32, var(--panel-height) / 3.5));
  --bs-btn-padding-x: 0.75em;
  --bs-btn-padding-y: 0.375em;
}
.setup-board .can-castle {
  margin-left: 0.75em;
  margin-right: 0.75em;
}
.setup-board .setup-board-piece {
  display: inline-block;
  position: static;
  flex: 1;
  max-width: calc(var(--panel-height) - 8px);
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: auto;
  cursor: pointer;
}

.game-card {
  --border-expand-width: 2px;
}

.game-card .status {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.game-card .title-bar {
  display: none;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
}

.game-card .title-bar-text {
  font-size: 0.8em;
  line-height: 1;
  user-select: none;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.game-card .title-bar .btn {
  padding: 2px;
  line-height: 1;
}

.game-card .title-bar .game-maximize-icon {
  font-size: 1em;
}

.game-card .title-bar .game-close-icon {
  font-size: 1.39em;   /* Randomely tweaked some values until the icons aligned properly */
  line-height: 0.72em;
  vertical-align: -0.11em;
}

.game-card-sm .status {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.game-card-sm .top-panel,
.game-card-sm .bottom-panel {
  height: 32px;
}

.game-card-sm .name {
  font-size: inherit;
  padding: 0.5rem;
}

.game-card-sm .rating {
  font-size: 0.6rem;
}

.game-card-sm .clock {
  padding-left: 10px;
  padding-right: 10px;
}

.game-card-sm .clock-time {
  font-size: 1.0rem;
}

.game-card-sm .fractional-clock-time {
  font-size: 0.625rem;
}

.game-card-sm .captured {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.game-card-sm .captured-piece {
  font-size: 0.75rem;
  padding-top: 0.38em;
  padding-bottom: 0.38em;
}

.game-card-sm .captured .captured-piece-img {
  margin: -13px -6px 0 -1px;
  width: 15px;
  height: 15px;
}

.game-card-sm .captured small {
  left: -4px;
  top: 6px;
}

#secondary-board-area {
  display: none;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.board-sprites {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn-transparent {
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-active-border-color: transparent;
}

#game-toolbar {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 0.5rem;
  border-bottom: 1px solid;
}
.menu-icon {
  display: inline-block;
  width: 1.25rem;
}
#game-tools-open-games .dropdown-icon {
  transform: translateX(-0.25rem);
}
#game-tools-close .dropdown-icon {
  transform: translateX(0.125rem);
}

#game-list-button > .label {
  display: inline-flex;
  overflow: hidden;
  max-width: calc(100% - 20px);
}
#game-list-dropdown {
  min-width: 100%;
  max-width: 100vw;
  width: 1000px;
}
#game-list-scroll-container {
  list-style: none;
  overflow: auto;
  max-height: calc(100vh - 300px);
}
#game-list-menu {
  padding: 0;
}

#move-table {
  padding: 0;
  text-align: center;
  table-layout: fixed;
}
#move-table th {
  border: 0;
  width: 20%;
  opacity: 0.5;
}
#move-table td {
  border: 0;
  width: 40%;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
}
#move-table .move {
  display: inline-block;
  vertical-align: top;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
}
#move-table .selectable:hover .move {
  font-weight: bold;
}
#move-table .subvariation .move {
  font-weight: normal;
}
#move-table .subvariation td {
  padding-right: 0;
}
#move-table .subvariation table {
  background-image: linear-gradient(var(--bracket-color), var(--bracket-color)),
                    linear-gradient(var(--bracket-color), var(--bracket-color)),
                    linear-gradient(var(--bracket-color), var(--bracket-color)),
                    linear-gradient(var(--bracket-color), var(--bracket-color));
  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, bottom left;
  border: 1px solid;
  border-right: none;
  border-width: 0 3px;
}
#move-table .selected {
  font-weight: bold;
}

.movelist .subvariation {
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
  padding-top: 2px;
  padding-bottom: 2px;
}
.movelist .subvariation:not(:has(+ .subvariation)) {
  padding-bottom: 3px;
}
.movelist .subvariation:not(.subvariation + .subvariation) {
  padding-top: 3px;
}
.movelist .subvariation::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0px;
  width: 1px;
  border-left: 1px solid;
}
.movelist .subvariation:has(+ .subvariation)::before {
  bottom: 2px;
}
.movelist .subvariation + .subvariation::before {
  top: 2px;
}

.comment {
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.comment[data-before-content]:after {
  content: attr(data-before-content) " ";
  font-style: italic;
}
.comment:after {
  content: " "; /* use trailing space to allow text wrapping to work properly */
}

.annotations-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 5 columns for symbols */
}
.annotations-menu .dropdown-item {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.annotation {
  font-family: "Segoe UI Symbol", var(--bs-body-font-family), "Noto Sans Symbols 2", "Noto Sans Math";
}

.piece-glyph::before {
  font-size: 1.3rem;
  font-weight: normal;
  font-family: "Noto Sans Symbols 2", var(--bs-body-font-family);
  margin-left: -0.2rem;
  margin-right: -0.03rem;
  line-height: 1rem; /* Ensure line-height is smaller than for regular text, so that it aligns to regular text's baseline */
}

.flex-line-break {
  flex-basis: 100%;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border: 1px solid;
}

.nav-tabs .nav-item .closeTab {
  opacity: 0;
  margin: 0px;
  padding: 0px;
  font-size: 0.85em;
}
.nav-tabs .nav-item:hover .closeTab {
  opacity: 1;
}
.nav-tabs .nav-link {
  font-size: 0.85em;
  padding-top: 1px;
  padding-bottom: 1px;
}

#tabs .nav-link {
  height: 32px
}

.tab-unviewed {
  color: tomato !important;
  font-weight: bold;
}

.dropdown-icon {
  margin-right: 6px;
}

.hide-caret.dropdown-toggle::after {
  display: none;
}

#variants-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.color-box {
  margin: 0 5px;
  width: 10px;
  height: 10px;
  display: inline-block;
  position: relative;
}

.movetime {
  display: inline-block;
  text-align: left;
  margin-left: 0.75rem;
  font-size: 0.75em;
  min-width: 10ch;
}

#textsize-range {
  width: 60px;
  height: auto;
  padding-left: 5px;
}

#engine-pvs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
#engine-pvs > li {
  padding: 6px;
}

#engine-pvs {
  font-size: 0.4em;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}
#engine-pvs > li {
  font-size: 2.3em;
}
.btn-engine {
  font-family: monospace;
  font-weight: bold;
}

.pane-status {
  padding: 10px;
  text-align: center;
}

@media (max-width: 767px) {
  .collapse-init {
    display: none;
  }

  #close-status {
    font-size: 30px;
    top: 15px;
    right: 9px;
    line-height: 0px;
    padding: 0px;
  }
}

@media (min-width: 768px) {
  #close-status {
    font-size: 20px;
    top: 9px;
    right: 3px;
    line-height: 0px;
    padding: 0px;
  }
}

/* Turn hover state off for buttons on devices with no mouse (mobile) because it looks stupid */
/* We achieve this by setting the hover color to match the normal button color */
@media (hover: none) {
  .btn-outline-secondary:hover {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
  }
}

.eval-line-above {
  fill: none;
  stroke-width: 3;
}
.eval-line-below {
  fill: none;
  stroke-width: 3;
}
.eval-area-above {
  stroke-width: 0;
}
.eval-area-below {
  stroke-width: 0;
}
.eval-axis .tick line {
  stroke-width: 1;
}
.eval-circle  {
  stroke-width: 2;
}
#eval-progress {
  padding: 20px;
}

.game-card .eval-bar {
  display: none;
  width: 34px;
  font-size: 0.8rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  .game-card .eval-bar {
    width: 26px;
  }
}

.game-card-sm .eval-bar {
  width: 17px;
}
@media (max-width: 767px) {
  .game-card-sm .eval-bar {
    width: 12px;
  }
}

.eval-bar-text {
  display: none;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.game-card:not(.game-card-sm) .side-ahead.eval-bar-text {
  display: block;
}
.eval-bar-segment:first-child .eval-bar-text {
  padding-bottom: 0.75rem;
  margin-top: auto;
}
.eval-bar-segment:last-child .eval-bar-text {
  padding-top: 0.75rem;
}
.eval-bar-white {
  height: 50%;
  transition: height 0.7s linear;
  color: #212529;
}
.eval-bar-black {
  flex-grow: 1;
  min-height: 0;
  color: whitesmoke;
}

.promotion-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  z-index: 10;
  height: 50%;
  width: 12.5%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  box-shadow: 0 0 4px var(--box-shadow-color),
              0 0 6px var(--box-shadow-color),
              0 4px 6px -4px var(--box-shadow-color),
              0 -4px 6px -4px var(--box-shadow-color);
}
.promotion-panel::after {
  all: unset;
}
.promotion-panel .promotion-piece {
  flex: 1;
  position: static;
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
}

/* Fix margin collapse glitch */
#lobby-table .btn:not(:last-child) {
  margin: 0px;
  border-bottom: none;
}

.notification-panel {
  transition: none;
  width: 100%;
  position: relative;
  z-index: 0;
}
#notifications.slide-up {
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.notification-panel.slide-down {
  transition: opacity 0.8s ease, margin-top 0.8s ease, z-index 0s ease 0.8s;
}
.notification-panel.slide-sideways {
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.notification-panel.slide-up {
  transition: opacity 0.8s ease, margin-top 0.8s ease;
}
.notifications-panel.notification .toast-header {
  padding-top: 6px;
  padding-bottom: 6px;
}
.notifications-panel.notification .toast-body {
  padding-top: 10px;
  padding-bottom: 10px;
}
#notifications-header .toast-body {
  padding-top: 1px;
  padding-bottom: 1px;
}
#notifications-close-icon {
  font-size: 19px;
  transform: translate(-1.5px, -3.2px);
}
#notifications-footer .toast-body {
  padding-top: 3px;
  padding-bottom: 4px;
}
.toast-body .body-text {
  word-break: break-word;
}

.close {
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 1px;
}

#play-computer-modal .modal-dialog {
  max-width: 400px;
}

#settings-modal .modal-dialog {
  max-width: 680px;
}

#settings-modal .modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.tooltip-separator {
  margin-top: 4px;
  margin-bottom: 4px;
}

.tooltip-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

input[type="number"] {
  appearance: initial;
  -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
  appearance: initial;
}

.premove-target::before {
  content: attr(data-order);
  position: absolute;
  top: 0.6em;
  left: 0.2em;
  font-size: 1.4vh;
  pointer-events: none;
}

.info-icon {
  cursor: pointer;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.settings-info-icon {
  vertical-align: text-top;
}

.settings-toggle-help {
  margin-top: 0.2rem;
  margin-left: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--bs-secondary-color, #6c757d);
}

.eye-toggle {
  --eye-toggle-icon-width: 1.125rem;
}
.eye-toggle label {
  white-space: nowrap;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-active-border-color: transparent;
}
.eye-toggle-icon {
  display: inline-block; 
  width: var(--eye-toggle-icon-width);  
  margin-right: 0.5rem;
} 
.eye-toggle-help {
  margin-top: -0.25rem; 
  margin-left: calc(var(--eye-toggle-icon-width) + 1.25rem);
}

#settings-tabs {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

#settings-tabs .nav-link {
  white-space: nowrap;
}

#basic-settings .form-check-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.not-signed-in-notice {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  border: 1px solid;
  z-index: 2;
  padding: 2rem;
  border-radius: 8px;
  white-space: nowrap;
}

.banner-alert {
  position: fixed; 
  width: fit-content; 
  white-space: nowrap;
  top: env(safe-area-inset-top); 
  left: 0; 
  transform: translateY(-100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 1050;
  background: #000;
  color: #fff;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: bold;
}
.banner-alert.show {
  transform: translateY(0); 
}

@media (max-width: 767px) {
  #settings-tabs {
    row-gap: 0.2rem;
    column-gap: 0.2rem;
  }

  #settings-tabs .nav-item {
    margin-bottom: 0;
  }

  #settings-tabs .nav-link {
    padding: 0.25rem 0.45rem;
    font-size: 0.85rem;
    line-height: 1.2;
  }

  #settings-shortcuts-tab {
    display: none;
  }

  #settings-shortcuts {
    display: none !important;
  }

  #basic-settings .form-group.row > .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #basic-settings .form-group.row {
    row-gap: 0.35rem;
  }

  .settings-toggle-help {
    font-size: 0.75rem;
  }
}

.settings-back {
  font-size: 1.5rem;
}

.settings-shortcuts-layout {
  min-height: 0;
}

.settings-shortcuts-body {
  min-height: 0;
  gap: 20px;
  align-items: flex-start;
}

#settings-shortcuts #shortcut-settings-right-col {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
}

#settings-shortcuts #shortcut-buttons {
  white-space: nowrap;
  display: inline-block;
}

#settings-shortcuts #shortcut-input-group {
  margin-bottom: 0.75rem;
}

#shortcuts-list {
  position: static;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 340px;
  overflow-y: auto; 
  overflow-x: hidden;
}

#macros-key {
  font-size: 0.8rem;
}
.macros-key-description {
  font-style: italic;
}

.tournament-group {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0;
  padding-bottom: 0.75rem;
}
.tournament-group-header {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.tournament-group-title {
  display: inline-block;
  font-weight: bold;
}
.tournament-group-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card.tournament-card {
  --bs-card-color: var(--fg-color);
}

@media (max-width: 767px) {
  .card.tournament-card {
    font-size: 0.9rem;
  }

  .settings-shortcuts-body {
    flex-direction: column;
    gap: 0.75rem;
  }

  #settings-shortcuts #shortcut-settings-right-col {
    width: 100%;
  }

  #settings-shortcuts #shortcut-buttons {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    white-space: normal;
  }

  #settings-shortcuts #shortcut-buttons .btn {
    flex: 1 1 0;
  }

  #shortcuts-list {
    max-height: 180px;
  }
}

#tournaments-pane-status {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-color, white);
}

.tournament-table-modal .modal-dialog {
  width: fit-content;
  max-width: min(calc(100vw - var(--bs-modal-margin) * 2));
}
.tournament-table-container {
  min-height: 100px;
  max-height: 500px; 
  overflow: auto;
}
.tournament-table-container table {
  width: auto;
}

.tournament-players-modal {
  --bs-modal-width: 1000px;
} 
.tournament-players-modal .modal-dialog {
  width: fit-content;
} 
.tournament-players {
  min-height: 100px;
  max-height: 500px; 
  overflow: auto;
}
.tournament-players table {
  width: auto;
}

.tournament-table-result { font-weight: bold; }

#users-modal {
  --bs-modal-width: 600px;
}

.users-table {
  table-layout: fixed;
}

.users-table td:nth-child(1),
.users-table th:nth-child(1) {
  width: 45%;
  overflow: hidden;
}
.users-table td:nth-child(2),
.users-table th:nth-child(2) {
  width: 11ch;
  overflow: hidden;
}
.users-table td:nth-child(3),
.users-table th:nth-child(3) {
  width: auto;
  overflow: hidden;
}
.users-table .user-status {
   flex-grow: 1;
   overflow: hidden; 
   min-width: 0; 
   white-space: nowrap;
}
.users-table .user-buttons {
  display: none;
  padding-left: 3ch;
  white-space: normal;
}
.users-table tr:hover .user-buttons {
  display: inline-flex;
}

.info-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  --bs-toast-max-width: 800px;
  --bs-toast-color: var(--fg-color);
}
@media (max-width: 767px) {
  .info-dialog {
    font-size: 0.7rem;
  }
}

.eval-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
  z-index: 3;
}
.eval-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 30%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background-color: var(--eval-icon-bg); 
  box-shadow:
    inset 0 0.5px 0.75px rgba(255, 255, 255, 0.25),
    inset 0 0 0 0.75px rgba(255, 255, 255, 0.18),
    inset 0 -0.75px 1px rgba(0, 0, 0, 0.45),
    0 1px 1.25px rgba(0, 0, 0, 0.35);
}
.eval-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 20%;
  transform: translate(50%, -50%);
  background-color: white;
  -webkit-mask: var(--eval-icon-url) center / contain no-repeat;
  mask: var(--eval-icon-url) center / contain no-repeat; 
  pointer-events: none;
}

.eval-icon-book {
  --eval-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 205.3L320 514.6L320.5 514.4C375.1 491.7 433.7 480 492.8 480L512 480L512 160L492.8 160C450.6 160 408.7 168.4 369.7 184.6C352.9 191.6 336.3 198.5 320 205.3zM294.9 125.5L320 136L345.1 125.5C391.9 106 442.1 96 492.8 96L528 96C554.5 96 576 117.5 576 144L576 496C576 522.5 554.5 544 528 544L492.8 544C442.1 544 391.9 554 345.1 573.5L332.3 578.8C324.4 582.1 315.6 582.1 307.7 578.8L294.9 573.5C248.1 554 197.9 544 147.2 544L112 544C85.5 544 64 522.5 64 496L64 144C64 117.5 85.5 96 112 96L147.2 96C197.9 96 248.1 106 294.9 125.5z"/></svg>');
  --eval-icon-bg: #1E9E55;
}
.eval-icon-best {
  --eval-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z"/></svg>');
  --eval-icon-bg: #2F5FA7;
}
.eval-icon-ok {
  --eval-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>');
  --eval-icon-bg: #6FA84F;
}
.eval-icon-inaccuracy {
  --eval-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Csvg x='0' y='0' width='1000' height='1000' viewBox='0 0 920 640' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='question-mark' d='M224 224C224 171 267 128 320 128C373 128 416 171 416 224C416 266.7 388.1 302.9 349.5 315.4C321.1 324.6 288 350.7 288 392L288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416L352 392C352 390.3 352.6 387.9 355.5 384.7C358.5 381.4 363.4 378.2 369.2 376.3C433.5 355.6 480 295.3 480 224C480 135.6 408.4 64 320 64C231.6 64 160 135.6 160 224C160 241.7 174.3 256 192 256C209.7 256 224 241.7 224 224zM320 576C342.1 576 360 558.1 360 536C360 513.9 342.1 496 320 496C297.9 496 280 513.9 280 536C280 558.1 297.9 576 320 576z'/%3E%3Cpath id='exclaimation-mark' d='M320 496C342.1 496 360 513.9 360 536C360 558.1 342.1 576 320 576C297.9 576 280 558.1 280 536C280 513.9 297.9 496 320 496zM320 64C346.5 64 368 85.5 368 112C368 112.6 368 113.1 368 113.7L352 417.7C351.1 434.7 337 448 320 448C303 448 289 434.7 288 417.7L272 113.7C272 113.1 272 112.6 272 112C272 85.5 293.5 64 320 64z'/%3E%3C/defs%3E%3Cg transform='translate(460,320) scale(1.1) translate(-460,-320)'%3E%3Cuse href='%23question-mark'/%3E%3Cuse href='%23exclaimation-mark' transform='translate(320, 0)'/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E");
  --eval-icon-bg: #C39A06;
}
.eval-icon-mistake {
  --eval-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M224 224C224 171 267 128 320 128C373 128 416 171 416 224C416 266.7 388.1 302.9 349.5 315.4C321.1 324.6 288 350.7 288 392L288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416L352 392C352 390.3 352.6 387.9 355.5 384.7C358.5 381.4 363.4 378.2 369.2 376.3C433.5 355.6 480 295.3 480 224C480 135.6 408.4 64 320 64C231.6 64 160 135.6 160 224C160 241.7 174.3 256 192 256C209.7 256 224 241.7 224 224zM320 576C342.1 576 360 558.1 360 536C360 513.9 342.1 496 320 496C297.9 496 280 513.9 280 536C280 558.1 297.9 576 320 576z"/></svg>');
  --eval-icon-bg: #C65A11;
}
.eval-icon-blunder {
  --eval-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Csvg x='0' y='0' width='1000' height='1000' viewBox='0 0 1000 640' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='icon' d='M224 224C224 171 267 128 320 128C373 128 416 171 416 224C416 266.7 388.1 302.9 349.5 315.4C321.1 324.6 288 350.7 288 392L288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416L352 392C352 390.3 352.6 387.9 355.5 384.7C358.5 381.4 363.4 378.2 369.2 376.3C433.5 355.6 480 295.3 480 224C480 135.6 408.4 64 320 64C231.6 64 160 135.6 160 224C160 241.7 174.3 256 192 256C209.7 256 224 241.7 224 224zM320 576C342.1 576 360 558.1 360 536C360 513.9 342.1 496 320 496C297.9 496 280 513.9 280 536C280 558.1 297.9 576 320 576z'/%3E%3C/defs%3E%3Cg transform='translate(500,320) scale(1.1) translate(-500,-320)'%3E%3Cuse href='%23icon'/%3E%3Cuse href='%23icon' transform='translate(360, 0)'/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E%0A");
  --eval-icon-bg: #B83225;
}