#main-wrapper.home.non-admin {
    --side-bar-width: 0px;
}

#main-wrapper.home.non-admin .sidebar {
    display: none;
}

.admin-players-filter-name, .admin-players-filter-origin {
    width: 5em;
}
.fide-id-none {
    opacity: 0.3;
}

.nav-icon-badge {
    bottom: 4px;
    display: flex;
    right: 12px;
    font-size: 10px;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.compact-sidebar .sidebar .nav-icon-main-badge {
    position: absolute;
}

.player-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

.player-secondary-link {
    color: var(--bs-secondary-color);
    opacity: 50%;
}

.player-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
    cursor: pointer;
    opacity: 1;
}

.highlight .player-link, .highlight .player-link:hover {
    color: black;
}

.table-sticky-border {
    border-right: 2px solid var(--bs-body-bg);
    left: var(--side-bar-width);
}

.modal-table-sticky-header {
    z-index: 2 !important;
    position: sticky !important;
    top: -1em;
}

.error-cell {
    border: 2px solid rgba(var(--bs-danger-rgb));
}

.warning-cell {
    border: 2px solid rgba(var(--bs-warning-rgb));
}

.w-15em {
    width: 15em;
}

.mw-10em {
    max-width: 10em;
    overflow: hidden;
}
.mw-15em {
    max-width: 15em;
    overflow: hidden;
}
.mw-25em {
    max-width: 25em;
    overflow: hidden;
}

.opacity-75 {
    opacity: 75%;
}

.pairing-modal .result-button {
    border: 3px white solid;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.pairing-modal .admin-result-button {
    border: 3px var(--bs-danger-border-subtle) solid;
}

.pairing-modal .admin-result-button:hover {
    border-color: var(--bs-danger);
}

.pairing-modal .result-button.white,
.pairing-modal .admin-result-button.white {
    background-color: white;
    color: black;
}

.pairing-modal .result-button.black,
.pairing-modal .admin-result-button.black {
    background-color: black;
    color: white;
}

.pairing-modal .result-button.draw,
.pairing-modal .admin-result-button.draw {
    background-color: gray;
}

.pairing-modal .result-button:hover,
.pairing-modal .admin-result-button:hover {
    background-color: var(--bs-primary);
    color: var(--pw-contrast-text);
}

.pairing-modal .admin-result-button.danger {
    border: 3px var(--bs-danger-border-subtle) solid;
    background-color: var(--bs-danger-border-subtle);
}

.pairing-modal .admin-result-button.danger:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

.pairing-modal .berger-number-input .pw-input-group:has(input[type="number"]) {
    width: auto;
}

.player-popover {
  max-width: none;
  width: max-content;   /* shrink to fit table */
}

.player-popover:has(.empty) {
    display: none;
}

.search-results-dropdown {
    max-height: 400px;
    width: fit-content;
    overflow-y: auto;
}

/* Time control editor – bootstrap-free layout for period rows */

.tc-side-title { font-size: 95%; margin-top: 0.3rem; }
.tc .tc-period { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .5rem; align-items: end; }
.tc .tc-period + .tc-period { margin-top: 1rem; }
.tc .tc-field label { font-size: .85rem; display: block; margin-bottom: .25rem; white-space: nowrap; margin-right: 1rem; }
.tc .tc-input { width: 100%; }
.tc .tc-del-wrap { display: flex; justify-content: end; align-items: center; }
.tc .tc-del-wrap .btn { padding: .375rem .75rem; font-size: 1rem; }

@media (max-width: 768px) {
    .tc .tc-period { position: relative; display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: start; padding-right: 56px; }
    .tc .tc-field { grid-column: 1; display: flex; align-items: center; }
    .tc .tc-input { flex-grow: 1; }
    .tc .tc-del-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* Select2 */

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: white;
    background-color: var(--pw-nav-bg);
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: var(--bs-body-bg);
    background-color: var(--bs-primary);
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    color: var(--pw-contrast-text);
    background-color: var(--bs-link-hover-color);
}
[data-bs-theme=dark] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme=dark] .select2-container--bootstrap-5.select2-container--open .select2-selection,
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
    outline: 0.15rem solid rgba(var(--bs-primary-rgb), 0.70);
    outline-offset: 4px;
}
[data-bs-theme=dark] .input-group .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme=dark] .input-group .select2-container--bootstrap-5.select2-container--open .select2-selection {
    outline: none;
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-search {
    padding: 0.8rem .75rem;
}
[data-bs-theme=dark] .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom: 0 solid transparent;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius:  0.25rem;
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    padding: 0 0.5em;
    margin-right: 0;
    margin-bottom: 0;
    background-color: var(--bs-modal-bg);
    display: inline-flex;
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection {
    padding: .375rem .375rem;
    border-radius: var(--bs-border-radius);
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .375rem;
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    filter: invert(1);
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection[aria-disabled=true] {
    background-color: var(--bs-secondary-bg) !important;
    opacity: 1;
}
.select2-border-radius-0-left .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.select2-border-radius-0-right .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* this ugly piece of style here allows us to hide the search bar (empty row) if we have no focus on the select, but still allow tab on it, while preserving the placeholder if no choices are selected */
/* NOTE (Molrn) the width / height = 0 prevents options from being deselected when the select is not focused
[data-bs-theme=dark] .select2-container--bootstrap-5:not(.select2-container--focus) .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__choice) .select2-search {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
} */

.select2-search__field {
    width: 100%;
}

.select2-selection__rendered {
    width: 100%;
    pointer-events: none;
}

.select2-selection__rendered .select2-selection__choice__remove {
    pointer-events: auto;
}

#data-source-select {
    flex: 0 0 auto;
    outline: none;
}

/* Screen size below md */
@media (max-width: 768px) {
    #data-source-select {
        width: 100px !important;
    }
}

.tooltip-inner.place-card-template {
    max-width: none;
}

.focus-honey-pot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.screen-card-table {
    width: 100%;
    max-width: 100%;
    font-size: 0.75rem;
}
.screen-card-table th, .screen-card-table td {
    border-width: 1px;
    text-overflow: ellipsis;
}

.dropdown-item-lg {
    font-size: 1.25rem;
}

.blue-checkbox {
    font-size: 90%;
}

.blue-checkbox:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Air DatePicker */

#air-datepicker-global-container {
    z-index: 9999;
}

/* Dark mode template from https://github.com/t1m0n/air-datepicker/issues/555#issuecomment-2667143337 */
.air-datepicker.dark {
    --adp-background-color: var(--bs-body-bg);
    --adp-background-color-hover: var(--pw-nav-bg);
    --adp-background-color-active: var(--bs-body-bg);
    --adp-background-color-in-range: rgba(215, 201, 170, .1);
    --adp-background-color-in-range-focused: rgba(215, 201, 170, .2);
    --adp-background-color-selected-other-month-focused: var(--bs-primary);
    --adp-background-color-selected-other-month: var(--bs-link-hover-color);
    --adp-color: var(--bs-body-color);
    --adp-color-secondary: var(--bs-secondary);
    --adp-accent-color: var(--bs-primary);
    --adp-color-current-date: var(--adp-accent-color);
    --adp-color-other-month: var(--bs-secondary);
    --adp-color-disabled: var(--bs-gray-dark);
    --adp-color-disabled-in-range: var(--bs-gray-dark);
    --adp-color-other-month-hover: var(--bs-secondary);
    --adp-border-color: #242424;
    --adp-border-color-inner: #3f3f3f;
    --adp-border-color-inline: #292929;
    --adp-nav-arrow-color: var(--adp-color-secondary);
    --adp-nav-color-secondary: var(--adp-color-secondary);
    --adp-day-name-color: var(--bs-primary);
    --adp-day-name-color-hover: #105370;
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    --adp-cell-background-color-selected: var(--bs-primary);
    --adp-cell-background-color-selected-hover: var(--bs-link-hover-color);
    --adp-cell-background-color-in-range: var(--adp-background-color-in-range);
    --adp-cell-background-color-in-range-hover: var(--adp-background-color-in-range-focused);
    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
    --adp-btn-color: var(--adp-accent-color);
    --adp-btn-color-hover: white;
    --adp-btn-background-color-hover: var(--adp-background-color-hover);
    --adp-btn-background-color-active: var(--adp-background-color-active);
    --adp-time-track-color: RGBA(215, 201, 170, .6);
    --adp-time-track-color-hover: RGBA(215, 201, 170, .9);
    --adp-time-day-period-color: var(--adp-color-secondary);

    .air-datepicker-cell.-selected- {
        color: var(--bs-body-bg);
    }
    .air-datepicker-cell.-selected-.-other-month- {
        color: var(--bs-body-bg);
    }
    .air-datepicker-cell.-selected-.-focus- {
        color: var(--pw-contrast-text);
    }

    .air-datepicker-overlay {
        --adp-overlay-background-color: rgba(255, 255,255, .3);
    }

    .air-datepicker--pointer:after {
        background:var(--adp-background-color);
        border-top: 1px solid var(--adp-border-color-inline);
        border-right: 1px solid var(--adp-border-color-inline);
    }

    .air-datepicker--buttons,
    .air-datepicker--time {
        border-top: 1px solid var(--adp-border-color-inner);
    }

    .air-datepicker-nav {
        border-bottom: 1px solid var(--adp-border-color-inner);
    }

    .air-datepicker-time--row input[type=range]::-ms-thumb{
        background: var(--adp-time-track-color);
        border: 1px solid var(--adp-time-track-color);
    }

    .air-datepicker-time--row input[type=range]::-webkit-slider-thumb{
        background: var(--adp-time-track-color);
        border: 1px solid var(--adp-time-track-color);
    }

    .air-datepicker-time--row input[type=range]::-moz-range-thumb {
        background: var(--adp-time-track-color);
        border: 1px solid var(--adp-time-track-color);
    }

    .air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
        border-color: var(--adp-time-track-color-hover);
    }
    .air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
        border-color: var(--adp-time-track-color-hover);
    }

    .air-datepicker-time--row input[type=range]:hover::-ms-thumb {
        border-color: var(--adp-time-track-color-hover);
    }

    .air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
        background: var(--adp-cell-background-color-selected);
        border-color: var(--adp-cell-background-color-selected);
    }
    .air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
        background: var(--adp-cell-background-color-selected);
        border-color: var(--adp-cell-background-color-selected);
    }
    .air-datepicker-time--row input[type=range]:focus::-ms-thumb {
        background: var(--adp-cell-background-color-selected);
        border-color: var(--adp-cell-background-color-selected);
    }
}

/* Selectable */

.ui-selected-0 {
    background-color: #4A5568 !important;
    color: #E2E8F0 !important;
}

.ui-selected-1 {
    background-color: #718096 !important;
    color: #F7FAFC !important;
}

.ui-selected-2 {
    background-color: #A0AEC0 !important;
    color: #2D3748 !important;
}

.ui-selected-3 {
    background-color: #CBD5E0 !important;
    color: #1A202C !important;
}

.ui-selected-4 {
    background-color: #48BB78 !important;
    color: #F7FAFC !important;
}

.ui-selected-5 {
    background-color: #2D3748 !important;
    color: #E2E8F0 !important;
}

.ui-selected-6 {
    background-color: #ED8936 !important;
    color: #1A202C !important;
}

.ui-selected-7 {
    background-color: #4299E1 !important;
    color: #F7FAFC !important;
}

.ui-selected-8 {
    background-color: #A0AEC0 !important;
    color: #2D3748 !important;
}

.ui-selected-9 {
    background-color: #F7FAFC !important;
    color: #1A202C !important;
}

.ui-selecting {
    background-color: var(--bs-secondary) !important;
}

.toggle.rounded,
.toggle.rounded .toggle-on,
.toggle.rounded .toggle-off,
.toggle.rounded .toggle-handle{
    border-radius: 20rem !important;
}