@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    src: url('/static/fonts/inter-v13-latin_latin-ext-200.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/inter-v13-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/static/fonts/inter-v13-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/static/fonts/inter-v13-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    src: url('/static/fonts/inter-v13-latin_latin-ext-900.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Reddit Mono', monospace;
    font-style: normal;
    font-weight: 500;
    src: url('/static/fonts/reddit-mono-v1-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Reddit Mono', monospace;
    font-style: normal;
    font-weight: 800;
    src: url('/static/fonts/reddit-mono-v1-latin-800.woff2') format('woff2');
}


:root {
    --primary: #8A9B68;
    --secondary: #868587aa;
    --blue: #136090;
    --white: #ffffff;
}
html, body {
    margin: 0;
    padding: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.btn {
    border-radius: 0.25em;
}
.btn[href], .btn[href]:hover { color: white; }
.btn[href].btn-light, .btn[href].btn-light:hover { color: black; }
.btn.btn-sm {
    padding: 0.125rem 0.35rem;
}
.btn.btn-primary:not(.btn-no3d),
.btn.btn-secondary:not(.btn-no3d),
.btn.btn-dark:not(.btn-no3d),
.btn.btn-3d {
    box-shadow: 0 3px 0 -1px #fff4 inset,
                0 -3px 0 -1px #0004 inset;
}
.btn.btn-primary:active,
.btn.btn-secondary:active,
.btn.btn-dark:active,
.btn.btn-danger:active,
.btn.btn-outline-danger:active,
.btn.btn-primary.active,
.btn.btn-secondary.active,
.btn.btn-dark.active,
.btn.btn-danger.active,
.btn.btn-outline-danger.active {
    box-shadow: 0 0 10px -6px #0008 inset;
}
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn.btn-dark:focus,
.btn.btn-outline-danger:focus,
.btn.btn-light:focus {
    outline: 1px solid var(--secondary);
}

.btn.btn-secondary {
    background-color: #ddd;
    color: #000;
    border-color: #aaa;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background-color: #ccc;
    color: #000;
}
.btn.btn-secondary:active,
.btn.btn-secondary.active {
    background-color: #bbb;
    color: #000;
    border-color: #999;
}

.btn.btn-primary {
    background-color: #798a57;
    color: #fff;
    border-color: #465724;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #687946;
    color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: #576835;
    color: #fff;
    border-color: #465724;
}

.btn.btn-outline-danger {
    background-color: transparent;
    color: #a00;
    border-color: transparent;
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus {
    color: #a00;
    border-color: #a00;
}
.btn.btn-outline-danger:active,
.btn.btn-outline-danger.active {
    background-color: #a00;
    color: #fff;
    border-color: #600;
}

[data-bs-theme="dark"] .btn.btn-outline-danger {
    background-color: transparent !important;
    color: #d33;
}
[data-bs-theme="dark"] .btn.btn-outline-danger:hover,
[data-bs-theme="dark"] .btn.btn-outline-danger:focus {
    color: #d33;
    border-color: #d33;
}
[data-bs-theme="dark"] .btn.btn-outline-danger:active,
[data-bs-theme="dark"] .btn.btn-outline-danger.active {
    background-color: #d33 !important;
    color: #fff;
    border-color: #600;
}

.btn.btn-sidecta {
    position: fixed;
    right: 0;
    top: 50%;
    transform: rotate(-90deg) translate(50%, 132.5%);
    z-index: 1000;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0;
}

.card {
    box-shadow: 0.25em 0.25em 2em -1em #0003;
    border-color: #aaa;
}
.card .card-header {
    font-weight: bold;
    border-bottom-color: #aaa;
}


.navbar-admin {
    background-color: white;
    padding: 0;
    position: fixed;
    left: 0; right: 0;
    top: 0;
    z-index: 152;
}
.navbar-admin .navbar-brand {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.navbar-admin .navbar-brand,
.navbar-admin .navbar-brand:hover {
    padding-right: 1em;
    font-size: 1.125rem;
    color: white;
}
.navbar-admin .navbar-nav {
    display: flex;
    align-items: center;
}
.navbar-admin .nav-link {
    color: black;
    padding: 0.25rem 0.5rem;
    margin: 0 0.2rem;
    background-color: #f0f0f0;
    border-radius: 0.25rem;
    font-size: 1.05rem;
}
.navbar-admin .nav-link:hover {
    background-color: #e0e0e0;
}

[data-bs-theme="dark"] .navbar-admin .nav-link {
    background-color: #222;
    color: white;
}
[data-bs-theme="dark"] .navbar-admin .nav-link:hover {
    background-color: #1a1a1a;
}

.navbar-admin + * {
    margin-top: 3.55rem;
}

/** ** Splash page (/) ** */
body.splash {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    min-height: 100vh;
    background-color: #222222;
}
body.splash {
    padding: 3rem;
    display: flex;
}
body.admin {
    padding-top: 2rem;
}
body.admin {
    background-color: #e5e9de;
}
[data-bs-theme="dark"] body.admin {
    background-color: #222222;
}
.splash .container {
    padding: 4rem;
    background-color: #e5e9de;
    border-radius: 0.25rem;
    flex-grow: 1;
    box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.5);
    overflow: auto;
}
body.admin .main-container {
    margin-bottom: 2rem;
}
body.admin table {
    background-color: white;
    border-color: #aaaaaa;
}
[data-bs-theme="dark"] body.admin table {
    background-color: #1a1a1a;
    border-color: #666;
}
.splash .splash-container {
    width: 512px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 2rem;
    flex-grow: 0;
}
.splash-logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    user-select: none;
    background-color: var(--primary);
    color: white;
    padding: 0.0625rem 0.35rem;
    border-radius: 0.125rem;
    text-decoration: none;
}
.splash .splash-logo {
    font-size: 3rem;
    padding: 0.125rem 0.65rem;
    border-radius: 0.125rem;
}

.splash-logo.first-part {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.splash-logo.second-part {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top: 0.125rem solid;
    border-right: 0.125rem solid;
    border-bottom: 0.125rem solid;
    background-color: white;
    color: var(--primary);
    font-size: 1em;
    padding: 0.225rem 0.5rem;
}
[data-bs-theme="dark"] .splash-logo.first-part {
    background-color: #dddddd;
    color: #222;
}
[data-bs-theme="dark"] .splash-logo.second-part {
    background-color: #222;
    color: #dddddd;
}

.splash h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: bold;
}

.splash p.lead {
    font-size: 1.35em;
    font-weight: 400;
}

label[for]:not(.form-check-label) {
    font-weight: bold;
    cursor: pointer;

}

body.application {
    background-color: #e5e9de;
}

.event-container .row>.col {    
    min-height: calc(100vh - 2.55rem);
}

.event-sidebar {
    max-width: 400px;
    padding: 3rem 1rem;
    position: fixed;
    top: 2.55rem;
    z-index: 100;
}

[data-bs-theme="dark"] .event-sidebar.bg-light {
    background-color: #111 !important;
}

.event-sidebar + .col {
    margin-left: 400px;
}

.event-sidebar h3 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.event-sidebar .nav, .event-sidebar .nav .nav-item {
    margin: 0;
    padding: 0;
}
.event-sidebar .nav .nav-item .nav-link {
    padding: 1.15rem;
    background: #fffd;
    color: black;
    font-weight: bold;
    margin: 0;
    font-size: 1.15rem;
    border: 1px solid #aaa;
    border-left-width: 0.2rem;
    transition: all .3s ease;
}
.event-sidebar .nav .nav-item + .nav-item .nav-link {
    border-top: 0;
}
.event-sidebar .nav .nav-item:first-of-type .nav-link {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.event-sidebar .nav .nav-item:last-of-type .nav-link {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.event-sidebar .nav .nav-item .nav-link:hover,
.event-sidebar .nav .nav-item .nav-link:focus {
    background-color: white;
    box-shadow: 0 .25rem 2rem -1.2rem #000a;
}
.event-sidebar .nav .nav-item .nav-link:focus {
    outline: 1px solid var(--secondary);
}
.event-sidebar .nav .nav-item .nav-link.active {
    border-left-color: var(--primary);
    border-left-width: 0.75rem;
    background-color: white;
}


[data-bs-theme="dark"] .event-sidebar {
    background-color: #3d443a;
}
[data-bs-theme="dark"] .event-sidebar .nav .nav-item .nav-link {
    background-color: #111;
    color: white;
}
[data-bs-theme="dark"] .event-sidebar .nav .nav-item .nav-link:hover,
[data-bs-theme="dark"] .event-sidebar .nav .nav-item .nav-link:focus {
    background-color: #222;
}
[data-bs-theme="dark"] .event-sidebar .nav .nav-item .nav-link.active {
    background-color: #222;
}
[data-bs-theme="dark"] .btn.btn-outline-danger:not(:active):not(.active) {
    background-color: #fff;
}

.alert {
    background-color: #fafafa;
    color: #000;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-width: 0.5rem;
    border-radius: 0;
    padding: 1.5rem 1rem;
}
.alert.alert-warning {
    background-color: #fafafa;
    border-left-color: #fc6;
}
.alert.alert-danger {
    background-color: #fafafa;
    border-left-color: #f66;
}
.alert.alert-info {
    background-color: #fafafa;
    border-left-color: #6af;
}
.alert.alert-success {
    background-color: #fafafa;
    border-left-color: #6a6;
}

.alert .btn-close {
    color: #222 !important;
    filter: none;
}
[data-bs-theme="dark"] .alert .btn-close {
    color: #eee !important;
    filter: invert();
}

.alert p:last-child {
    margin-bottom: 0;
}

.nav.nav-tabs {
    margin: 0 -0.25rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #c7cac1;
}
.nav.nav-tabs .nav-item {
    border: none;
    margin: 0 0.25rem;
    margin-bottom: -3px;
    line-height: 1;
}
.nav.nav-tabs .nav-item .nav-link {
    border: none;
    margin: 0;
    padding: 0.8rem 1.4rem;
    color: inherit;
    font-weight: bold;
    border-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 -4px 0 -1px #c7cac1 inset;
}
.nav.nav-tabs .nav-item .nav-link:hover,
.nav.nav-tabs .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.15);
}
.nav.nav-tabs .nav-item .nav-link.active {
    box-shadow: 0 -4px 0 -1px #7f817b inset;
}

.nav.nav-tabs.nav-fullsize {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
    border: none;
}
.nav.nav-tabs.nav-fullsize .nav-item {
    width: 0;
    flex-grow: 1;
    min-width: 100px;
    max-width: 300px;
}
.nav.nav-tabs.nav-fullsize .nav-item {
    margin: 0;
}
.nav.nav-tabs.nav-fullsize .nav-item .nav-link {
    text-align: center;
    padding: 1.2rem 0.25rem;
    border: none;
    border-radius: 0;
    font-weight: normal;
    box-shadow: 0 -4px 0 -1px #c7cac1 inset;
    height: 100%;
}
.nav.nav-tabs.nav-fullsize .nav-item .nav-link.active {
    font-weight: bold;
    box-shadow: 0 -4px 0 -1px #7f817b inset;
}
.nav.nav-tabs.nav-fullsize .nav-item .nav-link.deactive {
    color: #888 !important;
}
.nav.nav-tabs.nav-fullsize .nav-item .nav-link:hover,
.nav.nav-tabs.nav-fullsize .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.15);
}
.nav.nav-tabs.nav-fullsize .nav-item.nav-item-title .nav-link {
    padding: 1.1rem 0.25rem;
    font-size: 1.2rem;
}

.nav.nav-tabs.tabs-sm {
    margin: 0;
    margin-bottom: 0.5rem;
    border-bottom-width: 2px;
    width: max-content;
}
.nav.nav-tabs.tabs-sm .nav-item {
    margin: 0;
    margin-bottom: -2px;
}
.nav.nav-tabs.tabs-sm .nav-item .nav-link {
    border-radius: 0;
    padding: 0.4rem 0.5rem;
    font-weight: normal;
    box-shadow: 0 -3px 0 -1px #c7cac1 inset;
}
.nav.nav-tabs.tabs-sm .nav-item .nav-link.active {
    box-shadow: 0 -3px 0 -1px #7f817b inset;
    font-weight: bold;
}

[data-bs-theme="dark"] .alert {
    background-color: #333;
    color: white;
}

[data-bs-theme="dark"] .navbar {
    background-color: #333 !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

[data-bs-theme="dark"] .nav.nav-tabs .nav-item .nav-link:hover,
[data-bs-theme="dark"] .nav.nav-tabs .nav-item .nav-link.active {
    background-color: #000d;
}
[data-bs-theme="dark"] .nav.nav-tabs .nav-item .nav-link.active {
    border-color: #fff6;
}

.fs-small {
    font-size: 0.9rem;
}

.fs-smaller {
    font-size: 0.8rem;
}

.dropdown-menu.dropdown-wide {
    width: 350px;
}

.card-link {
    text-decoration: none;
    color: inherit;
    transition: all .3s ease;
    min-height: 200px;
    border-bottom-width: 0.25rem;
}
.card-link:hover,
.card-link:focus {
    background-color: #f0f0f0;
}
.card-link:focus {
    outline: 1px solid var(--secondary);
}
.card-link:active {
    background-color: #e0e0e0;
    box-shadow: 0 0 10px -6px #0008 inset;
}

.card-link .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-link .cll-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.card-link h3 {
    font-size: 1.75rem;
    text-align: center;
}

textarea.form-control {
    min-height: 150px;
}
textarea.form-control.form-lg {
    min-height: 500px;
}

.application .h-full {
    margin-top: -1rem;
    height: calc(100vh - 3.45rem);
}

.application .container-full {
    margin: -1rem;
    margin-right: -0.75rem;
    margin-bottom: 0;
}

.application .application-header {
    z-index: 150;
    position: relative;
}

.ignorable {
    transition: opacity 0.5s ease, filter 0.5s ease;
}
.ignorable:not(:hover):not(:active):not(:focus) {
    opacity: 0.45;
    filter: grayscale(0.85);
}

.container.container-small,
.card-semidialog {
    max-width: 812px;
}

.segmentation {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
}

.segmentation .segmentation-item {
    padding: 0.5rem;
    margin: 0.25rem 0;
}
.segmentation .segmentation-control {
    display: flex;
    justify-content: center;
}
.segmentation .segmentation-control .segmentation-checkbox {
    display: none;
}
.segmentation .segmentation-control .segmentation-label {
    display: block;
    color: transparent;
    text-align: center;
    font-size: 4px;
    width: 100%;
    border: 6px solid #f0f0f0;
    background-color: #f0f0f0;
    border-radius: 5px;
    user-select: none;
}
.segmentation .segmentation-control .segmentation-checkbox:checked + .segmentation-label {
    background-color: #333333;
    border-color: white;
}

img {
    max-width: 100%;
    height: auto;
}


.match-summary {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.match-summary .match-header {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.125rem 0;
}
.match-summary .match-header .match-group {
    margin-right: 1rem;
}
.match-summary .match-header .match-status {
    margin-right: 1rem;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
}
.match-summary .match-header .match-status.match-status-called-up {
    background-color: #ff6;
}
.match-summary .match-header .match-status.match-status-running {
    background-color: #faa;
}
.match-summary .match-header .match-status.match-status-completed {
    background-color: #afa;
}
.match-summary .match-header .match-tag {
    margin-right: 0.5rem;
    font-variant: small-caps;
}
.match-summary .match-header .match-actions {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.match-summary .match-header .match-actions>.btn,
.match-summary .match-header .match-actions>.dropdown>.btn {
    font-size: inherit;
    padding: 0 0.25rem;
    margin-left: 0.15rem;
}
.match-summary .match-white {
    border-left: 0.35rem solid #eeeeee;
    padding: 0.25rem 0.35rem;
}
.match-summary .match-blue {
    border-left: 0.35rem solid #3333dd;
    padding: 0.25rem 0.35rem;
}
.match-summary:not(.match-summary-compact) .match-white,
.match-summary:not(.match-summary-compact) .match-blue {
    font-size: 0.75em;
}
.match-summary:not(.match-summary-compact) .match-white strong,
.match-summary:not(.match-summary-compact) .match-blue strong {
    display: block;
    font-size: 1.33333333em;
}
.match-summary .match-result {
    margin: 0.25rem 0;
    padding: 0.15rem;
    font-size: 0.95rem;
    background-color: #fffada;
    display: flex;
    align-items: center;
}
.match-summary .match-result .match-result-title {
    margin-right: 0.75rem;
    text-decoration: underline;

}
.match-summary .match-result .match-result-winner {
    margin-right: 0.25rem;
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
}

.match-summary .match-result .match-result-winner::before {
    content: '';
    height: 0.85rem;
    width: 0.85rem;
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.35rem;
}
.match-summary .match-result .match-result-winner.match-result-winner-white::before {
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
}
.match-summary .match-result .match-result-winner.match-result-winner-blue::before {
    background-color: #3333dd;
}

.match-summary .match-sb {
    display: flex;
    max-width: 250px;
    width: 100%;
    align-items: center;
}
.match-summary .match-sb .match-sb-white,
.match-summary .match-sb .match-sb-blue {
    padding: 0.25rem;
    flex-grow: 1;
    width: 0;
    display: flex;
}
.match-summary .match-sb .match-sb-white {
    order: 0;
    background-color: #eee;
}
.match-summary .match-sb .match-sb-blue {
    order: 2;
    background-color: #00a;
    color: white;
}
.match-summary .match-sb .match-sb-white .match-sb-field,
.match-summary .match-sb .match-sb-blue .match-sb-field {
    width: 0;
    flex-grow: 1;
    padding: 0.1rem;
    border: 1px solid;
    text-align: center;
    font-size: 0.9rem;
}
.match-summary .match-sb .match-sb-white .match-sb-field:not(:last-child),
.match-summary .match-sb .match-sb-blue .match-sb-field:not(:last-child) {
    border-right: none;
}
.match-summary .match-sb .match-sb-white .match-sb-field.match-sb-field-bad {
    color: #f00;
    border-color: black;
}
.match-summary .match-sb .match-sb-blue .match-sb-field.match-sb-field-bad {
    color: #f66;
    border-color: white;
}
.match-summary .match-sb .match-sb-time {
    padding: 0.25rem 0.5rem;
    font-weight: bold;
}

.match-summary.match-summary-large-fs .match-header {
    font-size: 1.2rem;
    padding: 0.35rem 0;
}

.match-summary.match-summary-large-fs .match-white,
.match-summary.match-summary-large-fs .match-blue {
    font-size: 1.75rem;
    padding: 0.6rem 0.35rem;
    border-left-width: 0.5rem;
    padding-left: 0.5rem;
}


.match-summary.match-summary-large-fs:not(.match-summary-compact) .match-white,
.match-summary.match-summary-large-fs:not(.match-summary-compact) .match-blue {
    font-size: 1.125em;
}
.match-summary.match-summary-large-fs:not(.match-summary-compact) .match-white strong,
.match-summary.match-summary-large-fs:not(.match-summary-compact) .match-blue strong {
    display: block;
    font-size: 1.5rem;
}

.match-summary.match-summary-obsolete {
    background-color: #eaa;
    padding: 0.25rem;
    flex-direction: row;
    flex-wrap: wrap;
}
.match-summary.match-summary-obsolete .match-header {
    display: none;
}
.match-summary.match-summary-obsolete .match-white,
.match-summary.match-summary-obsolete .match-blue {
    width: 0;
    flex-grow: 1;
}
.match-summary.match-summary-obsolete .match-white {
    border-color: white;
}
.match-summary.match-summary-obsolete .match-result {
    background-color: transparent;
    width: 100%;
    flex-grow: 0;
}

.table-scoreboard {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    table-layout: fixed;
}

.table-scoreboard tr.row-fighters th {
    text-align: center;
}
.table-scoreboard tr.row-fighters th.col-white {
    background-color: #ddd;
}
.table-scoreboard tr.row-fighters th.col-blue {
    background-color: #008;
    color: white;
}

.table-scoreboard tr.row-labels th {
    text-align: center;
    font-size: 0.85rem;
}
.table-scoreboard tr.row-labels th.col-white {
    background-color: #fff;
}
.table-scoreboard tr.row-labels th.col-blue {
    background-color: #00f;
    color: white;
}

.table-scoreboard tr.row-inputs td input,
.table-scoreboard tr.row-inputs td output {
    font-size: 2rem;
    padding: 0;
    width: 100%;
    background-color: transparent;
    color: inherit;
    text-align: center;
    font-weight: bold;
}
.table-scoreboard tr.row-inputs td input {
    border: 1px dashed rgba(0, 0, 0, 0.25);
}
.table-scoreboard tr.row-inputs td output {
    margin: 0;
}
.table-scoreboard tr.row-inputs td.col-white {
    background-color: #fff;
}
.table-scoreboard tr.row-inputs td.col-blue {
    background-color: #00f;
    color: white;
}
.table-scoreboard tr.row-inputs td.col-penalty input,
.table-scoreboard tr.row-inputs td.col-penalty output,
.table-scoreboard tr.row-inputs td.col-penalty input,
.table-scoreboard tr.row-inputs td.col-penalty output {
    color: red;
}

input.w-min {
    width: 80px;
    max-width: 80px;
}
select.w-min {
    width: 150px;
    max-width: 150px;
}

.place1 {
    background-color: goldenrod;
    color: black;
    border-radius: .5rem;
    box-shadow: 0 -.2rem 0 0 rgba(0, 0, 0, 0.1) inset;
}
.place2 {
    background-color: lightgray;
    color: black;
    border-radius: .5rem;
    box-shadow: 0 -.15rem 0 0 rgba(0, 0, 0, 0.2) inset;
}
.place3 {
    background-color: sienna;
    color: white;
    border-radius: .5rem;
    box-shadow: 0 -.1rem 0 rgba(0, 0, 0, 0.2) inset;
}


.csv-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 1rem;
    position: relative;
}

.csv-table th,
.csv-table td {
    border: 1px solid #eee;
    padding: 0.15rem;
    font-size: 0.9rem;
}

.csv-table td {
    word-break: break-all;
    font-family: monospace;
}

.csv-table th.csv-table-firstcol {
    width: 60px;
    max-width: 60px;
    border-color: #ccc;
    color: #888;
    text-align: center;
    background-color: #eee;
}

.csv-table tr.csv-table-firstrow th {
    border-color: #ccc;
    color: #888;
    text-align: center;
    background-color: #eee;
}

.csv-table thead th {
    position: sticky;
    top: 3rem;
}

.csv-table td.csv-table-abbreviated {
    font-weight: bold;
    text-align: center;
    color: #666;
}

.sb {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100%;
}

.sb .sb-dark {
    background-color: #222222;
    color: white;
}
.sb .sb-light {
    background-color: #eeeeee;
}
.sb .sb-white {
    background-color: #ffffff;
}
.sb .sb-blue {
    background-color: #0000ff;
    color: white;
}

.sb .sb-header {
    padding: 0.75rem;
}

.sb .sb-btn {
    padding: 0;
    font: inherit;
    border: 1px solid;
    background-color: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    border-radius: 0.2rem;
    box-shadow: 0 -4px 0 -1px #2b2b2b inset;
    line-height: 1.15;
}
.sb .sb-side.sb-white .sb-btn {
    box-shadow: 0 -4px 0 -1px #bfbfbf inset;
}
.sb .sb-side.sb-blue .sb-btn {
    box-shadow: 0 -4px 0 -1px #8181ff inset;
}
.sb .sb-time-control .sb-btn {
    box-shadow: 0 -4px 0 -1px #666666 inset;
}
.sb .sb-btn[disabled],
.sb .sb-time-control .sb-btn[disabled],
.sb .sb-side.sb-white .sb-btn[disabled],
.sb .sb-side.sb-blue .sb-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
    box-shadow: none;
}


.sb .sb-time-header {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.sb .sb-time {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-grow: 1;
    justify-content: space-around;
}
.sb .sb-time .sb-time-global {
    background-color: #dd6;
    font-size: 6rem;
    font-family: 'Reddit Mono', monospace;
    font-weight: 800;
    color: #000;
    text-align: center;
    max-width: 600px;
    margin: 0.25rem;
    border-radius: 0.2rem;
    width: 100%;
    border: 0.75rem solid transparent;
    line-height: 1.15;
    flex-grow: 2;
    align-content: center;
}

.sb .sb-time.running .sb-time-global {
    background-color: #6d6;
}
.sb .sb-time.goldenscore .sb-time-global {
    border-color: #fa2;
}

.sb .sb-time-control {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    flex-grow: 1;
}

.sb .sb-time-control .sb-btn,
.sb .sb-time-correct .sb-btn {
    margin: 0.125rem;
    padding: 0.75rem 0.25rem;
    font-size: 1.5rem;
    width: 0;
    flex-grow: 1;
    color: white;
    border-color: #666;
    text-transform: uppercase;
    font-weight: bold;
}

.sb .sb-time-correct {
    position: absolute;
    right: .5rem;
    top: .5rem;
}

.sb .sb-time-correct .sb-btn {
    width: min-content;
    flex-grow: 0;
    font-size: 1rem;
    padding: 0.25rem;
    width: 2rem;
}

.sb .sb-side {
    flex-grow: 1;
    max-height: 200px;
}

.sb .sb-side,
.sb .sb-side-labels {
    display: flex;
    padding: 0.5rem;
}

.sb .sb-side-labels {
    align-items: center;
}

.sb .sb-side .sb-cell,
.sb .sb-side-labels .sb-cell {
    width: 0;
    flex-grow: 1;
    padding: 0.15rem;
}

.sb .sb-side .sb-cell.sb-twobtncell {
    display: flex;
    flex-direction: column;
}
.sb .sb-side-labels .sb-cell.sb-btncell .sb-btn,
.sb .sb-side .sb-cell.sb-twobtncell .sb-btn {
    font-size: 1.35rem;
    font-weight: bold;
    margin: 0.15rem;
    height: 1.75em;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0.25);
    width: 100%;
}

.sb .sb-side.sb-blue .sb-cell.sb-twobtncell .sb-btn {
    border-color: rgba(255, 255, 255, 0.45);
}
.sb .sb-side .sb-cell.sb-twobtncell .sb-btn.sb-btn-large {
    font-size: 3rem;
    padding: 0.25rem;
    flex-grow: 1;
}
.sb .sb-side .sb-cell.sb-twobtncell .sb-btn.sb-btn-large[disabled] {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: transparent;
    opacity: 1;
}
.sb .sb-side.sb-blue .sb-cell.sb-twobtncell .sb-btn.sb-btn-large[disabled] {
    border-color: rgba(255, 255, 255, 0.1);
}
.sb .sb-side .sb-cell.sb-twobtncell.sb-osaekomi-btns .sb-btn.sb-btn-large {
    font-size: 1.85rem;
}

.sb .sb-side .sb-cell.sb-twobtncell.sb-penalty .sb-btn.sb-btn-large {
    color: #f00;
}
.sb .sb-side.sb-blue .sb-cell.sb-twobtncell.sb-penalty .sb-btn.sb-btn-large {
    color: #f66;
}

.sb .sb-side-labels .sb-cell.sb-label {
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.15;
}

.sb .sb-side .sb-cell.sb-osaekomi {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 500;
    font-family: 'Reddit Mono', monospace;
}

.sb .sb-side .sb-cell.sb-osaekomi .sb-osaekomi-item {
    border: .125em double;
    height: 5.5rem;
    width: 5.5rem;
    line-height: 1;
    padding: 2.3rem 0;
    letter-spacing: -0.25rem;
    padding-right: 0.25rem;
    text-align: center;
    border-radius: 50%;
    margin: 0;
    line-height: 0;
}
.sb .sb-side .sb-cell.sb-osaekomi .sb-osaekomi-item:empty {
    display: none;
}

.sb .sb-side.sb-white .sb-cell.sb-osaekomi .sb-osaekomi-item {
    margin-top: 2rem;
}
.sb .sb-side.sb-blue .sb-cell.sb-osaekomi .sb-osaekomi-item {
    margin-bottom: 2rem;
}

@media all and (min-width: 1800px) {
    .sb .sb-side .sb-cell.sb-twobtncell .sb-btn.sb-btn-large {
        font-size: 4rem;
    }
    .sb .sb-side .sb-cell.sb-osaekomi {
        font-size: 4rem;
    }
    .sb .sb-side .sb-cell.sb-osaekomi .sb-osaekomi-item {
        width: 6rem;
        height: 6rem;
        padding: 2.55rem 0;
        padding-right: 0.25rem;
    }
}

@media all and (max-width: 1400px) {
    .sb .sb-side-labels .sb-cell.sb-btncell .sb-btn,
    .sb .sb-side .sb-cell.sb-twobtncell .sb-btn {
        font-size: 1.25rem;
        height: 1.65em;
    }

    .sb .sb-side-labels .sb-cell.sb-label {
        font-size: 1rem;
    }
    .sb .sb-side .sb-cell.sb-twobtncell .sb-btn.sb-btn-large {
        font-size: 2rem;
    }
    .sb .sb-side .sb-cell.sb-twobtncell.sb-osaekomi-btns .sb-btn.sb-btn-large {
        font-size: 1.5rem;
    }
}

@media all and (max-width: 1199px) {
    .sb {
        min-height: 100vh;
    }
}

.list-group-item.w-label {
    width: 250px;
}
.list-group-item.list-group-item-action {
    width: auto;
}

.error {
    background-color: #e5e9de;
    padding: 2rem;
}

.error .container {
    padding: 1rem;
    max-width: 600px;
    margin: 4vh auto;
}

.error .container h1 {
    text-align: center;
    font-weight: bold;
    font-size: 1.75rem;
    text-transform: uppercase;
    color: #687946;
    margin-bottom: 2rem;
}

.error .container p {
    line-height: 2;

    font-size: 1.15rem;
}

.pagination .page-item .page-link {
    color: black;
    border: none;
    font-weight: bold;
    box-shadow: 0 3px 0 -1px #fff4 inset,
                0 -3px 0 -1px #0004 inset;
    cursor: pointer;
    user-select: none;
}
.pagination .page-item .page-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.pagination .page-item.active .page-link {
    background-color: var(--primary);
    color: white;
}

.form-check-input[disabled] + .form-check-label {
    pointer-events: none;
    user-select: none;
}


.repeated-call-btn {
    font: inherit;
    font-family: 'Reddit Mono', monospace;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    height: 3rem;
    width: 3rem;
    background-color: transparent;
    position: relative;
    border: none;
    color: #888888;
    text-align: center;
}

.repeated-call-btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    padding: 0.5rem 0.5rem;
    height: 100%;
    width: 100%;
    z-index: 0;
    border: 0.5rem solid #eeeeee;
    border-top-color: #cccccc;
    border-radius: 50%;
    animation: spinner-rotate 5s ease-in-out infinite;
    text-align: center;
}
@keyframes spinner-rotate {
    100% {
        transform: rotate(3turn);
    }
}
@keyframes spinner-pulse {
    60% {
        transform: scale(110%);
    }
}
.repeated-call-btn.pending::before {
    content: '📣';
    background-color: #f3f300;
    border-color: #ffff99;
    animation: spinner-pulse 2s ease-in-out infinite;
}


.modal-content.modal-border-red {
    border: 1rem solid var(--bs-danger);
}

img.img-spinner {
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    min-height: 50px;

    /*
    The image represented in base64 in the line below this copyright notice has been obtained
    from

        https://github.com/n3r4zzurr0/svg-spinners

    where the image had been made available under the following license terms:

        The MIT License (MIT)

        Copyright (c) Utkarsh Verma

        Permission is hereby granted, free of charge, to any person obtaining a copy of
        this software and associated documentation files (the "Software"), to deal in
        the Software without restriction, including without limitation the rights to
        use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
        the Software, and to permit persons to whom the Software is furnished to do so,
        subject to the following conditions:

        The above copyright notice and this permission notice shall be included in all
        copies or substantial portions of the Software.

        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
        FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
        COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
        IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
        CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    
    The above copyright notice only refers to the line after this comment and does not
    apply to any other parts of this TATAMI software, see /LICENSE for more information
    on the license TATAMI is being provided under.
    */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+LnNwaW5uZXJfUzFXTnthbmltYXRpb246c3Bpbm5lcl9NR2ZiIC44cyBsaW5lYXIgaW5maW5pdGU7YW5pbWF0aW9uLWRlbGF5Oi0uOHN9LnNwaW5uZXJfS205UHthbmltYXRpb24tZGVsYXk6LS42NXN9LnNwaW5uZXJfSkFwUHthbmltYXRpb24tZGVsYXk6LS41c31Aa2V5ZnJhbWVzIHNwaW5uZXJfTUdmYns5My43NSUsMTAwJXtvcGFjaXR5Oi4yfX08L3N0eWxlPjxjaXJjbGUgY2xhc3M9InNwaW5uZXJfUzFXTiIgY3g9IjQiIGN5PSIxMiIgcj0iMyIvPjxjaXJjbGUgY2xhc3M9InNwaW5uZXJfUzFXTiBzcGlubmVyX0ttOVAiIGN4PSIxMiIgY3k9IjEyIiByPSIzIi8+PGNpcmNsZSBjbGFzcz0ic3Bpbm5lcl9TMVdOIHNwaW5uZXJfSkFwUCIgY3g9IjIwIiBjeT0iMTIiIHI9IjMiLz48L3N2Zz4=");
}