@font-face {
    font-family: "AtkinsonHyperlegibleNextVF";
    src: url("/static/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2"),
            url("/static/fonts/AtkinsonHyperlegibleNextVF-Variable.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
}

* {
	font-family: AtkinsonHyperlegibleNextVF, sans-serif;
}

body {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-attachment: fixed;
	overflow: auto !important;
}

a:focus, a:active {
  outline: none;
  box-shadow: 0 0 0 2px;
  border-radius: 4px;
}

#main-wrapper {
    display: flex;
    flex-direction: row;
    min-width: fit-content;
}

.sidebar {
    position: sticky;
    top: 0;
    left: 0;
    width: var(--side-bar-width);
    min-width: var(--side-bar-width);
    min-height: var(--vh, 100vh);
    background-color: var(--pw-nav-bg);
    z-index: 5;
}

.sidebar h4 {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.compact-sidebar #main-wrapper {
    --side-bar-width: 50px;
}

body[data-bs-theme="light"] #main-wrapper {
    --side-bar-width: 0px;
}

.sidebar-divider {
    height: 1px;
    width: 100%;;
    background-color: var(--bs-border-color);
}

.sidebar .dropdown-arrow {
    display: inline-block;
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

.sidebar .back-icon {
    font-size: 1.25rem;
}

.sidebar button > i, .sidebar button > div > i {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.35rem;
}

.sidebar-tooltip {
    width: 100%;
}

.sidebar button > i.indented {
    padding-left: 0.75rem;
}

.compact-sidebar .sidebar button > i, .compact-sidebar .sidebar button > i.indented {
    font-size: 1rem;
    padding-left: 0;
    padding-right: 0;
}

.sidebar .btn-toggle[aria-expanded="true"] .dropdown-arrow{
    transform: rotate(90deg);
}

.sidebar h4 {
    color: var(--bs-primary);
}

.compact-sidebar .sidebar h4, .compact-sidebar .sidebar .expanded-only {
    display: none;
}

.sidebar .compact-only {
    display: none;
}

.compact-sidebar .sidebar .compact-only {
    display: block;
}

.sidebar .nav-link {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.sidebar .nav-link:hover, .sidebar .btn-link:hover {
    background-color: var(--bs-body-bg);
    color: var(--bs-nav-hover-color);
}

.sidebar .nav-link.active, .sidebar .nav-link.active:hover {
    background-color: var(--bs-primary);
    color: var(--bs-body-bg);
}

.sidebar .sidebar-chevron {
    padding: 0;
    margin: 0;
    position: relative;
    width: auto;
    left: -0.6rem;
}

#sidebar-expander {
    display: none;
    position: fixed;
    bottom: 30px;
    left: calc(var(--side-bar-width) - 13px);
    border-radius: 1000px;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    background-color: var(--pw-nav-bg);
    border: 1px solid var(--bs-border-color);
    padding: 4px 0 0 0;
    z-index: 11;
}

#sidebar-expander:hover {
    background-color: var(--bs-body-bg);
}

body[data-bs-theme="dark"] #sidebar-expander {
    display: flex;
}

#sidebar-expander i {
    padding: 0;
    margin: 0;
}

#page-wrapper {
    display: inline-block;
    min-height: calc(var(--vh, 100vh) - 60px);
    min-width: calc(var(--vw, 100vw) - var(--side-bar-width));
}

#top-nav-wrapper {
    position: sticky;
    top: 0;
    min-width: calc(var(--vw, 100vw) - var(--side-bar-width));
    z-index: 4;
    padding: 12px 0;
}

#top-nav-wrapper .form-check {
    margin-bottom: 0;
}

body[data-bs-theme="dark"] #top-nav-wrapper {
    background-color: rgba(var(--bs-body-bg-rgb), 1);
}

#top-nav-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    z-index: 3;
    padding: 0 1rem;
    max-width: calc(var(--vw, 100vw) - var(--side-bar-width));
    position: sticky;
    left: var(--side-bar-width);
}

#copyright-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    justify-content: center;
    position: sticky;
    left: 0;
    width: calc(var(--vw, 100vw) - var(--side-bar-width));
}

.input-block {
    display: flex;
    flex-wrap: wrap;
    row-gap: .25rem;
}

.tooltip.show {
    opacity: 1;
}

.input-block .form-check-label {
    white-space: nowrap;
    margin-right: 1rem;
}

.row .input-block:has(.form-switch) {
    height: 100%;
    align-items: center;
}

.pw-input-group {
    flex-grow: 1;
    width: auto;
}

.pw-input-group:has(input[type="number"]) {
    width: 0;
}

.pw-input-group:has(.is-invalid) ~ .invalid-feedback,
.pw-input-group:has(.is-invalid) ~ .invalid-tooltip {
  display: block;
}

.input-group-text.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}
.input-group-text.is-valid {
    border-color: var(--bs-form-valid-border-color);
}

.form-control:focus {
  border-color: var(--bs-border-color);
  box-shadow: none;
}

.input-group .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .input-group:focus-within,
[data-bs-theme=dark] .input-group:has(.select2-container--open) {
    box-shadow: none;
    outline: 0.15rem solid rgba(var(--bs-primary-rgb), 0.70);
    outline-offset: 4px;
    border-radius: var(--bs-border-radius)
}

.is-invalid {
    scroll-margin-top: 40px
}

.nav-underline .nav-link.active, .nav-underline .show > .nav-link {
    font-weight: 400;
}

.section-title {
    display: inline-block;
    background-color: var(--bs-primary);
    padding: .25rem 1.5rem 0.25rem 2rem;
    margin-bottom: 2rem;
    color: var(--pw-contrast-text);
    position: relative;
    border-radius: 0 1000px 1000px 0;
    padding-left: 2rem;
    margin-left: -12px;
    font-size: 1.5rem;
    font-weight: 400;
}

.section-title:has(a > i) {
    padding-right: 0rem;
    margin-right: 3rem;
}

.section-title > a:has(i) {
    position: relative;
    left: 2.5rem;
    top: 0.2rem;
}

.btn-group>span:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.htmx-indicator {
    opacity: 0;
    pointer-events: none;
    height: 80px;
    width: 80px;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: #d7c9aa;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 1000px;
}
.input-htmx-indicator {
    height: 1.5em;
    width: 1.5em;
    margin-left: -32px;
    z-index: 3;
    padding: 3px;
}
.with-input-group-indicator .htmx-indicator {
    height: 1.5em;
    width: 1.5em;
    padding: 3px;
    display: none;
}
.with-input-group-indicator > .bi {
    height: 1.5em;
    width: 1.5em;
}
.with-input-group-indicator.htmx-request > .bi {
    display: none;
}
.with-input-group-indicator.htmx-request .htmx-indicator {
    display: flex;
}
.input-group-text .htmx-indicator
.input-group-text .htmx-indicator.htmx-request {
    display: block;
}
body[data-bs-theme="dark"] .htmx-indicator {
    background-color: rgba(0, 0, 0, 0.3);
}
.htmx-indicator svg {
    width: 100%;
    height: 100%;
    animation: spin 1.5s infinite;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
    transition-delay: 500ms;

}
@keyframes spin {
    100% {transform: rotate(1turn)}
}

#messages {
    z-index: 1;
}
.cursor-grab {
    cursor: grab;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-grap {
    cursor: grab;
}
.sharly-chess-tooltip-info, .sharly-chess-tooltip-warning, .sharly-chess-tooltip-error {
    --bs-tooltip-bg: #9d9e9e;
    --bs-tooltip-color: black;
    --bs-tooltip-opacity: 1;
}
.sharly-chess-tooltip-warning {
  --bs-tooltip-color: #900000;
}
.sharly-chess-tooltip-error {
  --bs-tooltip-color: #900000;
}

.tooltip-danger {
    color: #af2e3b;
}

.card-title {
    margin-bottom: 0;
}
.card-title:empty {
    display: none;
}
.card-block:not(:last-child) {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bs-secondary);
}
.card-block:not(:first-child) {
    padding-top: 0.7rem;
    border-top: 1px solid var(--bs-secondary);
}
.card-block + .card-block {
    border-top: none;
}
.card-block-button {
    float: right;
    margin-top: -0.2rem;
    margin-left: 0.5rem;
    margin-bottom: 0.2rem;
}
.card-block-content > * + * {
    margin-top: 0.25rem;
}
.image-screen, .card-body {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.locale-flag {
    height: 1em;
}
.dropdown-menu {
    min-width: 0;
}
.table-dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.dropdown-item.no-hover:hover {
    color: var(--bs-dropdown-link-color);
    background-color: transparent;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    left: 100%;
    margin-top: -37px;
}
.dropdown-toggle::after {
    font-size: var(--font-md);
    margin-bottom: -2px;
}
.dropdown-item.danger:hover {
    color: var(--bs-danger);
}
.player-ffe-lic {
    color: #ffffff;
    display: inline-block;
    width: 1.2em;
}
.player-unchanged .player-ffe-lic,
.player-updated .player-ffe-lic {
    color: unset;
}
.player-ffe-lic.ffe-lic-A {
    background-color: #001da3;
}
.player-ffe-lic.ffe-lic-B {
    background-color: #6480ff;
}
.player-ffe-lic.ffe-lic-N {
    background-color: #767676;
}
.player-ffe-lic.ffe-lic-- {
    background-color: #FF7CAE;
}
.player-federation-flag {
    height: 1em;
}

.modal {
    --bs-modal-width: min(90vw, 1000px);
}
.modal * + h4, .modal * + .collapse-button {
    margin-top: 1.5rem;
}
.modal h4, .modal * + .collapse-button {
    font-size: 1.3rem;
}
.modal-dialog:has(.empty-modal) {
    display: none;
}
.modal .row + .row {
    margin-top: 0.001rem;
}

/* Colour themes */

.text-contrast {
    color: var(--pw-contrast-text);
}

body[data-bs-theme=light] {
    --bs-primary: #777;
    --bs-primary-rgb: 119, 119, 119;
    --bs-body-bg: #fff;
    --bs-link-color: #777;
    --bs-link-color-rgb: 119, 119, 119;
    --bs-link-hover-color: #888;

    --pw-contrast-text: #fff;
    --pw-nav-bg: #eee;
}

body[data-bs-theme=light] .nav {
    --bs-nav-link-color: #000;
    --bs-nav-link-hover-color: #000;
}

body[data-bs-theme=light] .btn-primary {
    --bs-btn-color: var(--pw-contrast-text);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: #d7c9aa;
    --bs-btn-hover-color: var(--pw-contrast-text);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--pw-contrast-text);;
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pw-contrast-text);
    --bs-btn-disabled-bg: #9d9e98;
    --bs-btn-disabled-border-color: #9d9e98;
}

[data-bs-theme=light] .btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--pw-contrast-text);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--pw-contrast-text);;
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #9d9e98;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #9d9e98;
    --bs-gradient: none;
}

[data-bs-theme=dark] {
    --side-bar-width: 230px;
    --bs-primary: #d7c9aa;
    --bs-primary-rgb: 215, 201, 170;
    --pw-contrast-text: #212529;
    --pw-nav-bg: #313334;

    /* Copy/pasted from the BS docs for easier editing */
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-rgb: 36, 194, 121;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #e5dbc6;
    --bs-link-hover-color: #e9e1cf;
    --bs-link-color-rgb: 229, 219, 198;
    --bs-link-hover-color-rgb: 233, 225, 207;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}

[data-bs-theme=dark] *:focus, [data-bs-theme=light] *:focus {
    box-shadow: none;
    outline: 0.15rem solid rgba(var(--bs-primary-rgb), 0.70);
    outline-offset: 4px;
}

.dropdown-item:focus {
    outline: 0;
    box-shadow: none;
}

[data-bs-theme=dark] .nav {
    --bs-nav-link-color: #fff;
    --bs-nav-link-hover-color: #fff;
}

[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: var(--pw-contrast-text);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: #d7c9aa;
    --bs-btn-hover-color: var(--pw-contrast-text);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--pw-contrast-text);;
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pw-contrast-text);
    --bs-btn-disabled-bg: #9d9e98;
    --bs-btn-disabled-border-color: #9d9e98;
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--pw-contrast-text);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--pw-contrast-text);;
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #9d9e98;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #9d9e98;
    --bs-gradient: none;
}

[data-bs-theme=dark] .card {
    --bs-card-bg: #313334;
}

[data-bs-theme=dark] .card-disabled {
    --bs-card-bg: #4a4c4d;
}

[data-bs-theme=dark] .card.btn:hover {
    --bs-btn-hover-bg: #36393d;
}

[data-bs-theme=dark] .card:has(button:focus), [data-bs-theme=dark] .card:has(button:active) {
  outline: none;
}

[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-bg: #515b5c;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-secondary);
    --bs-dropdown-link-active-color: var(--pw-contrast-text);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item.no-hover {
    --bs-dropdown-link-hover-bg: var(--bs-dropdown-bg);
}

[data-bs-theme=dark] .modal {
    --bs-modal-bg: #313334;
}

[data-bs-theme=dark] .modal-dialog h4 {
    color: var(--bs-primary);
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme=dark] table.prominent {
    border-collapse: separate;
    border-spacing: 0;
    border-color: transparent;
    background-color: rgba(var(--bs-body-bg-rgb), 1);
}

[data-bs-theme=dark] table.prominent > tbody {
  background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
}

[data-bs-theme=dark] table.prominent thead th,
[data-bs-theme=dark] table.prominent tr.header td {
    background-color: var(--bs-primary);
    color: var(--pw-contrast-text);
    padding: 5px;
    border-bottom: 7px solid var(--bs-body-bg);
    vertical-align: middle;
}

[data-bs-theme=dark] table.prominent.table-danger-header thead th {
    background-color: var(--bs-danger);
    color: white;
    padding: 5px;
    border-bottom: 7px solid var(--bs-body-bg);
    vertical-align: middle;
}

[data-bs-theme=dark] table.prominent.table-danger-warning thead th {
    background-color: rgb(var(--bs-warning-rgb));
    padding: 5px;
    border-bottom: 7px solid var(--bs-body-bg);
    vertical-align: middle;
}


[data-bs-theme=dark] table.prominent thead td,
[data-bs-theme=dark] table.prominent tr.header td {
    padding: 5px;
}

[data-bs-theme=dark] table.prominent thead th *:focus {
    outline: 0.15rem solid rgba(var(--bs-body-bg-rgb), 0.70);
}

[data-bs-theme=dark] table.prominent th,
[data-bs-theme=dark] table.prominent td {
    vertical-align: middle;
    height: 2.5rem;
}

[data-bs-theme=dark] table.prominent tr.highlight td, table.prominent tr.highlight th {
    background-color: rgba(var(--bs-primary-rgb), 0.70);
    color: black;
}

[data-bs-theme=dark] table.prominent tr.highlight-warning td, table.prominent tr.highlight-warning th {
    background-color: var(--bs-form-invalid-color);
    color: black;
}

[data-bs-theme=dark] table.prominent tr.highlight td .btn-outline-primary {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-body-bg);
    --bs-btn-hover-border-color: var(--bs-body-bg);
}

[data-bs-theme=dark] table.prominent tr.sortable-chosen,
[data-bs-theme=dark] table.prominent tr.sortable-ghost {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme=dark] table.prominent tr.separator td {
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.3);
}

table > tbody > tr.odd > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

table th.padded-header {
    padding-top: 60px;
}

button.collapse-button {
    border: none;
    background-color: transparent;
}

button.collapse-button .bi-chevron-down {
    transition: all 0.3s ease;
}

button.collapse-button[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(-90deg);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.message-debug {
    border: 1px solid rgb(var(--bs-secondary-rgb));
    background-color: rgb(var(--bs-secondary-rgb));
    color: rgb(var(--bs-light-rgb));
}

.message-info {
    border: 1px solid rgb(var(--bs-info-rgb));
    background-color: rgb(var(--bs-info-rgb));
    color: rgb(var(--bs-dark-rgb));
}

.message-success {
    border: 1px solid rgb(var(--bs-success-rgb));
    background-color: rgb(var(--bs-success-rgb));
    color: rgb(var(--bs-light-rgb));
}

.message-warning {
    border: 1px solid rgb(var(--bs-warning-rgb));
    background-color: rgb(var(--bs-warning-rgb));
    color: rgb(var(--bs-dark-rgb));
}

.message-error {
    border: 1px solid rgb(var(--bs-danger-rgb));
    background-color: rgb(var(--bs-danger-rgb));
    color: rgb(var(--bs-light-rgb));
}

.message-info .btn-close, .message-warning .btn-close {
    --bs-btn-close-white-filter: unset;
}

.alert.message-success {
    --bs-success-rgb: 25, 135, 84;
}

.alert .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

.error-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 60px);
}

.error-page-container .error-page-logo {
    height: 40vh;
    width: 40vh;
    background-color: #900000;
    color: white;
    padding: 30px;
    border-radius: 100%;
    margin: 50px 0;
}

.error-page-container svg {
    width: 100%;
    height: 100%;
}

.compact-col {
    width: 1px;
    white-space: nowrap;
}

.character-grid {
  display: grid;
  grid-auto-flow: column;
  gap: 0.25rem;
  justify-content: start;
}

.character-grid span {
  width: 1.3ch;
  text-align: center;
  font-family: inherit;
}

input[type="color"].form-control {
    height: calc(1.5em + 0.75rem + 2px); /* line-height * font-size + padding-y + border */
    padding: 0;
}

.form-fields-container {
    border: 1px solid var(--bs-border-color);
    padding: 0.5rem 1rem;;
    margin: 1rem 0;
    background-color: rgba(var(--bs-body-bg-rgb), 0.30) ;
}

sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    font-size: 0.85em;
}

.text-ellipsis {
    text-overflow: ellipsis
}