html {
    height:100%;
    display: flex;
    flex-flow: column;
}
body {
    flex: 1;
    display: flex;
    flex-flow: column;
}
#app-container {
    flex: 1;
}

input[type=checkbox]:not(:checked) ~ .spoiler {
    background-color: #333;
    color: transparent;
    user-select: none;
    transition: color .25s, background-color .25s;
}

input[type=checkbox]:checked ~ .spoiler { 
  background-color: inherit;
  color: inherit;
  user-select: auto;
  transition: color .25s, background-color .25s;
}

.bi-link-45deg::before  {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>');
}

.btn-danger {
    --bs-btn-color:  #fff;
    --bs-btn-bg:  #dc3545;
    --bs-btn-border-color:  #dc3545;
    --bs-btn-hover-color:  #fff;
    --bs-btn-hover-bg:  #bb2d3b;
    --bs-btn-hover-border-color:  #b02a37;
    --bs-btn-focus-shadow-rgb:  225,  83,  97;
    --bs-btn-active-color:  #fff;
    --bs-btn-active-bg:  #b02a37;
    --bs-btn-active-border-color:  #a52834;
    --bs-btn-active-shadow:  inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color:  #fff;
    --bs-btn-disabled-bg:  #dc3545;
    --bs-btn-disabled-border-color:  #dc3545;
}

.btn-success {
    --bs-btn-color:  #fff;
    --bs-btn-bg:  #198754;
    --bs-btn-border-color:  #198754;
    --bs-btn-hover-color:  #fff;
    --bs-btn-hover-bg:  #157347;
    --bs-btn-hover-border-color:  #146c43;
    --bs-btn-focus-shadow-rgb:  60,  153,  110;
    --bs-btn-active-color:  #fff;
    --bs-btn-active-bg:  #146c43;
    --bs-btn-active-border-color:  #13653f;
    --bs-btn-active-shadow:  inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color:  #fff;
    --bs-btn-disabled-bg:  #198754;
    --bs-btn-disabled-border-color:  #198754;
}

.list-group-item-success {
    --bs-list-group-color:  var(--bs-success-text-emphasis);
    --bs-list-group-bg:  var(--bs-success-bg-subtle);
    --bs-list-group-border-color:  var(--bs-success-border-subtle);
    --bs-list-group-action-hover-color:  var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg:  var(--bs-success-border-subtle);
    --bs-list-group-action-active-color:  var(--bs-emphasis-color);
    --bs-list-group-action-active-bg:  var(--bs-success-border-subtle);
    --bs-list-group-active-color:  var(--bs-success-bg-subtle);
    --bs-list-group-active-bg:  var(--bs-success-text-emphasis);
    --bs-list-group-active-border-color:  var(--bs-success-text-emphasis);
}

.list-group-item-danger {
    --bs-list-group-color:  var(--bs-danger-text-emphasis);
    --bs-list-group-bg:  var(--bs-danger-bg-subtle);
    --bs-list-group-border-color:  var(--bs-danger-border-subtle);
    --bs-list-group-action-hover-color:  var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg:  var(--bs-danger-border-subtle);
    --bs-list-group-action-active-color:  var(--bs-emphasis-color);
    --bs-list-group-action-active-bg:  var(--bs-danger-border-subtle);
    --bs-list-group-active-color:  var(--bs-danger-bg-subtle);
    --bs-list-group-active-bg:  var(--bs-danger-text-emphasis);
    --bs-list-group-active-border-color:  var(--bs-danger-text-emphasis);
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

@media (prefers-color-scheme:dark) {
    .text-muted {
        color: #DEE2E6;
        opacity: 0.75;
    }
    code {
        color: #e685b5;
    }
    a {
        color: #6EA8FE;
    }
    a:hover {
        color: #8BB9FE;
    }
    .alert {
        background-color: #1a1d20;
        color: #dee2e6;
        border-color: #343a40;
    }
}

@media (prefers-color-scheme:light) {
    .alert-link {
        color: #ffffff;
    }
}

.continue-hidden {
    visibility: hidden;
}

.continue-shown {
    visibility: visible;
}

.element-hidden {
    display: none;
}

:root[data-bad-pitch-checkboxes="true"] .pair-checkbox-input:checked {
    background-color: #fd0d0d;
}

:root[data-bad-pitch-checkboxes="true"] .pair-checkbox-input {
    border-color: #fd0d0d;
}

.shortcut-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0.5em;
    align-items: center;
}

.shortcut-input-container {
    display: flex;
    flex: 1;
}

.shortcut-input-container > * {
    flex: 1;
    width: 1px; /* starting width, grows from here */
    margin-left: 0.2em;
    margin-right: 0.25em;
}

input {
    border-radius: 0.25em;
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: rgba(0,  0,  0,  0);
}

.options-group {
    display: flex;
    align-items: center;
    margin-top: 1px;
}

input[type=range] {
    width: 100%;
}