:root {
    --box-small-max-width: 400px;
    --counter-position-right: 2.2rem;
    --counter-position-bottom: -.6rem;
    --sidenav-icon-size: 30px;
    --nav-underline-border-width: .125rem;
    --change-highlight-color: orange;
    --list-actions-grid-gap: .25rem;
}

html[data-accessibility~='font-size'] {
    --box-small-max-width: 500px;
    --counter-position-right: 3rem;
    --list-actions-grid-gap: .5rem;
}

html[data-accessibility~='contrast'] {
    --change-highlight-color: #333;
}

html:not([data-accessibility~='contrast']) {
    .accordion-item:has(.is-invalid) {
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.25);
    }
}

/*<editor-fold desc="Sizes & Width">*/

.w-unset {
    width: unset;
}

.white-space-nowrap {
    white-space: nowrap;
}

.break-none {
    word-break: keep-all;
}

/*</editor-fold>*/

/*<editor-fold desc="Color">*/

.text-inherit {
    color: inherit;
}

/*</editor-fold>*/

/*<editor-fold desc="Nav">*/

.nav-underline-container {
    padding-bottom: var(--nav-underline-border-width);
    background-image: linear-gradient(transparent calc(100% - var(--nav-underline-border-width)), var(--bs-dark-bg-subtle) var(--nav-underline-border-width));
    background-clip: padding-box;
}

.nav-underline-container .nav.nav-underline {
    --bs-nav-underline-border-width: var(--nav-underline-border-width);
    margin-bottom: calc(-1 * var(--nav-underline-border-width));
}

/*</editor-fold>*/

/*<editor-fold desc="Alert">*/

.alert {
    border: none;
    border-left: .25rem solid var(--bs-alert-border-color);
    border-radius: 0;

    &.alert-success, &.alert-warning, &.alert-danger, &.alert-info {
        display: grid;
        grid-template-columns: min-content 1fr;
        grid-column-gap: 1.25rem;
        grid-row-gap: .125rem;

        &::before {
            font-family: 'bootstrap-icons';
            grid-column: 1;
            grid-row: 1 / -1;
        }

        > * {
            grid-column: 2;
        }
    }
}

.alert.alert-success::before {
    content: '\F270';
}

.alert.alert-warning::before {
    content: '\F33B';
}

.alert.alert-danger::before {
    content: '\F333';
}

.alert.alert-info::before {
    content: '\F431';
}

/*</editor-fold>*/

/*<editor-fold desc="Form">*/

.form-control.is-invalid + .form-label {
    color: var(--bs-danger);
}

.form-validation:has(.is-invalid) .submit-warning {
    display: block !important;
}

.counter {
    position: absolute;
    right: var(--counter-position-right);
    bottom: var(--counter-position-bottom);
    background-color: white;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size:.875em
}

.select-single-complex-control a.form-control, .select-multiple-control a.form-control {
    min-height: calc(1.5rem + .75rem + .375rem + calc(2 * var(--bs-border-width)));
}

.form-field.list-input-container .list-add {
    border-radius: 0;
}

.list-item[disabled] + .btn-close {
    transform: rotate(45deg);
}

.form-control[tabindex="-1"]:focus {
    box-shadow: none;
}

.form-control.disabled {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

.form-box-sm {
    width: 100%;
    max-width: var(--box-small-max-width);
}

form .accordion {
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: transparent;
}

form .accordion .accordion-button {
    font-size: 1.25rem;
}

form .accordion .accordion-item:has(.is-invalid) .accordion-button {
    color: var(--bs-danger);
}

form .accordion .accordion-item:has(.is-invalid) .accordion-button::before {
    font-family: 'bootstrap-icons';
    content: '\F333';
    padding-right: 1rem;
}

/*</editor-fold>*/

/*<editor-fold desc="Tree">*/

details.tree > *:not(summary) {
    margin-left: 1em;
}

summary > * {
    display: inline-block;
    max-width: 90%;
    vertical-align: top;
}

/*</editor-fold>*/

/*<editor-fold desc="Grid Templates">*/

.actions-2-container {
    display: grid;
    grid-template-areas: "c1 c2";
    grid-template-columns: 24px 24px;
    grid-gap: var(--list-actions-grid-gap);
    justify-content: end;
}

.actions-4-container {
    display: grid;
    grid-template-areas: "c1 c2 c3 c4";
    grid-template-columns: 24px 24px 24px 24px;
    grid-gap: var(--list-actions-grid-gap);
    justify-content: end;
}

.actions-5-container {
    display: grid;
    grid-template-areas: "c1 c2 c3 c4 c5";
    grid-template-columns: 24px 24px 24px 24px 24px;
    grid-gap: var(--list-actions-grid-gap);
    justify-content: end;
}

.c1 {
    grid-area: c1;
}

.c2 {
    grid-area: c2;
}

.c3 {
    grid-area: c3;
}

.c4 {
    grid-area: c4;
}

.c5 {
    grid-area: c5;
}

.grid-3-table {
    display: grid;
    grid-template-columns: min-content auto min-content;
    grid-column-gap: 1rem;
}

.grid-stretch {
    grid-column: 1 / -1;
}

.subgrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/*</editor-fold>*/

/*<editor-fold desc="Boxes">*/

.box-small {
    display: grid;
    grid-template-columns: 1fr minmax(auto, var(--box-small-max-width)) 1fr;
    grid-auto-rows: min-content;
}

.box-small > * {
    grid-column: 2;
}

.box-circle > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.box-circle > *:not(:last-child)::after {
    display: inline-block;
    content: '🞄';
    padding: .5em !important;
}

/*</editor-fold>*/

/*<editor-fold desc="List">*/

.row-discarded {
    display: none;
}

.filter-no-match {
    display: none !important;
}

#management-content-table:has(.filter-container) {
    min-height: calc(350px + 3rem + 6em);
}

[data-accessibility~='font-size'] #management-content-table:has(.filter-container) {
    min-height: calc(350px + 5rem + 6em);
}

.filter-options {
    max-height: 300px;
    overflow: auto;
}

td.has-change-column {
    position: sticky;
    left: 0;
    top: auto;
    margin-top: -1px;
    border-bottom: 0;
    padding: .125rem;
}

tr.has-changes td.has-change-column {
    background-color: var(--change-highlight-color);
}

tr.tr-error td.has-change-column {
    background-color: var(--bs-danger) !important;
}

/*</editor-fold>*/

/*<editor-fold desc="Spinner">*/

.big-spinner {
    width: 3rem;
    height: 3rem;
}

/*</editor-fold>*/