html[data-theme="light"],
:root {
    --focus-blue: #0071e3;

    --primary: #0066cc;
    --secondary: #1d1d1f;
    --accent: #0066cc;
    --primary-fg: #ffffff;

    --body-fg: #1d1d1f;
    --body-bg: #ffffff;
    --body-quiet-color: #6e6e73;
    --body-medium-color: #333333;
    --body-loud-color: #1d1d1f;

    --header-bg: #000000;
    --header-color: #98989d;
    --header-branding-color: #ffffff;
    --header-link-color: #ffffff;

    --breadcrumbs-bg: #f5f5f7;
    --breadcrumbs-fg: #6e6e73;
    --breadcrumbs-link-fg: #1d1d1f;

    --link-fg: #0066cc;
    --link-hover-color: #0071e3;
    --link-selected-fg: #0066cc;

    --hairline-color: #e3e3e5;
    --border-color: #d2d2d7;
    --control-border: #8e8e93;

    --error-fg: #d70015;
    --success-fg: #248a3d;

    --message-success-bg: #f1f7f2;
    --message-warning-bg: #fdf6ec;
    --message-error-bg: #fdf1f1;

    --darkened-bg: #f5f5f7;
    --selected-bg: #eaf2fb;
    --selected-row: #dbe9fb;

    --button-fg: #ffffff;
    --button-bg: #000000;
    --button-hover-bg: #333333;
    --default-button-bg: #000000;
    --default-button-hover-bg: #333333;
    --close-button-bg: #000000;
    --close-button-hover-bg: #333333;
    --delete-button-bg: #d70015;
    --delete-button-hover-bg: #b3000f;

    --object-tools-fg: #000000;
    --object-tools-bg: transparent;
    --object-tools-hover-fg: #ffffff;
    --object-tools-hover-bg: #000000;

    --font-family-primary:
        "SF Pro Text",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji";
    --font-family-display:
        "SF Pro Display",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --focus-blue: #2997ff;

        --primary: #2997ff;
        --secondary: #f5f5f7;
        --accent: #2997ff;

        --body-fg: #ffffff;
        --body-bg: #1d1d1f;
        --body-quiet-color: #a1a1a6;
        --body-medium-color: #cccccc;
        --body-loud-color: #ffffff;

        --header-bg: #000000;
        --header-color: #98989d;

        --breadcrumbs-bg: #252527;
        --breadcrumbs-fg: #a1a1a6;
        --breadcrumbs-link-fg: #ffffff;

        --link-fg: #2997ff;
        --link-hover-color: #6cb6ff;
        --link-selected-fg: #2997ff;

        --hairline-color: #3a3a3c;
        --border-color: #48484a;
        --control-border: #8e8e93;

        --error-fg: #ff6961;
        --success-fg: #30d158;

        --message-success-bg: #17251b;
        --message-warning-bg: #262015;
        --message-error-bg: #2a1618;

        --darkened-bg: #272729;
        --selected-bg: #16344f;
        --selected-row: #17364f;

        --button-fg: #000000;
        --button-bg: #ffffff;
        --button-hover-bg: #e8e8ed;
        --default-button-bg: #ffffff;
        --default-button-hover-bg: #e8e8ed;
        --close-button-bg: #ffffff;
        --close-button-hover-bg: #e8e8ed;
        --delete-button-bg: #ff453a;
        --delete-button-hover-bg: #ff6961;

        --object-tools-fg: #ffffff;
        --object-tools-bg: transparent;
        --object-tools-hover-fg: #000000;
        --object-tools-hover-bg: #ffffff;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;

    --focus-blue: #2997ff;

    --primary: #2997ff;
    --secondary: #f5f5f7;
    --accent: #2997ff;

    --body-fg: #ffffff;
    --body-bg: #1d1d1f;
    --body-quiet-color: #a1a1a6;
    --body-medium-color: #cccccc;
    --body-loud-color: #ffffff;

    --header-bg: #000000;
    --header-color: #98989d;

    --breadcrumbs-bg: #252527;
    --breadcrumbs-fg: #a1a1a6;
    --breadcrumbs-link-fg: #ffffff;

    --link-fg: #2997ff;
    --link-hover-color: #6cb6ff;
    --link-selected-fg: #2997ff;

    --hairline-color: #3a3a3c;
    --border-color: #48484a;
    --control-border: #8e8e93;

    --error-fg: #ff6961;
    --success-fg: #30d158;

    --message-success-bg: #17251b;
    --message-warning-bg: #262015;
    --message-error-bg: #2a1618;

    --darkened-bg: #272729;
    --selected-bg: #16344f;
    --selected-row: #17364f;

    --button-fg: #000000;
    --button-bg: #ffffff;
    --button-hover-bg: #e8e8ed;
    --default-button-bg: #ffffff;
    --default-button-hover-bg: #e8e8ed;
    --close-button-bg: #ffffff;
    --close-button-hover-bg: #e8e8ed;
    --delete-button-bg: #ff453a;
    --delete-button-hover-bg: #ff6961;

    --object-tools-fg: #ffffff;
    --object-tools-bg: transparent;
    --object-tools-hover-fg: #000000;
    --object-tools-hover-bg: #ffffff;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.224px;
}

#header {
    padding: 10px 24px;
}

#site-name a:link,
#site-name a:visited {
    color: var(--header-link-color);
    font-family: var(--font-family-display);
    font-weight: 600;
    letter-spacing: -0.374px;
}

#user-tools,
#logout-form button {
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.224px;
}

#user-tools a,
#logout-form button {
    border-bottom: none;
    border-radius: 8px;
    padding: 5px 10px;
    transition: background 200ms ease;
}

#user-tools a:focus,
#user-tools a:hover,
#logout-form button:focus,
#logout-form button:hover {
    background: rgb(255 255 255 / 14%);
    color: #ffffff;
    border-bottom: none;
}

div.breadcrumbs {
    padding: 9px 24px;
    border-bottom: 1px solid var(--hairline-color);
}

div.breadcrumbs a {
    color: var(--link-fg);
}

#content {
    padding: 16px 24px 32px;
}

#content > h1 {
    font-family: var(--font-family-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.374px;
    margin-bottom: 16px;
}

.module {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--body-bg);
    overflow: hidden;
    margin-bottom: 16px;
}

body .module h2,
body .module caption,
body .inline-group h2,
body fieldset .fieldset-heading,
body fieldset .inline-heading {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    font-family: var(--font-family-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.224px;
    text-transform: none;
    padding: 9px 16px;
}

.module caption a.section:link,
.module caption a.section:visited,
.module h2 a:link,
.module h2 a:visited {
    color: var(--body-loud-color);
}

.module caption a.section:focus,
.module caption a.section:hover {
    color: var(--link-fg);
}

.dashboard .module table th {
    padding: 0;
}

.dashboard .module table th a {
    display: block;
    padding: 9px 16px;
}

.dashboard .module table td {
    padding: 9px 16px 9px 0;
}

.dashboard .module table tr:hover {
    background: var(--darkened-bg);
}

.quicklinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.quicklink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--body-bg);
    color: var(--body-loud-color);
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease;
}

.quicklink:link,
.quicklink:visited {
    color: var(--body-loud-color);
}

.quicklink:hover,
.quicklink:focus-visible {
    background: var(--darkened-bg);
    border-color: var(--body-quiet-color);
}

.quicklink svg {
    flex: 0 0 auto;
    stroke: currentColor;
}

.quicklink b {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--body-loud-color);
}

.quicklink span span {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--body-quiet-color);
    margin-top: 1px;
}

#nav-sidebar {
    border-inline-end: 1px solid var(--hairline-color);
    padding: 4px 12px 24px;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
    vertical-align: middle;
    padding-block: 0;
}

#nav-sidebar .module th {
    padding-inline: 0;
}

#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited {
    display: block;
    padding: 8px 16px;
    color: var(--link-fg);
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus-visible {
    color: var(--link-hover-color);
}

#nav-sidebar .module td {
    padding: 6px 10px 6px 0;
}

#nav-sidebar .module tbody tr > th,
#nav-sidebar .module tbody tr > td {
    border-bottom: 1px solid var(--hairline-color);
}

#nav-sidebar .module tbody tr:last-child > th,
#nav-sidebar .module tbody tr:last-child > td {
    border-bottom: none;
}

#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: var(--body-loud-color);
}

#nav-sidebar table tr:not(.current-model):hover > * {
    background: var(--darkened-bg);
}

#nav-sidebar .current-model > * {
    background: var(--selected-row);
}

#nav-sidebar .current-model > th {
    box-shadow: inset 3px 0 0 var(--link-fg);
}

#nav-sidebar .current-model th a:link,
#nav-sidebar .current-model th a:visited,
#nav-sidebar .current-model th a:hover,
#nav-sidebar .current-model th a:focus-visible {
    color: var(--body-loud-color);
    font-weight: 600;
}

.toggle-nav-sidebar {
    color: var(--body-loud-color);
}

#nav-filter {
    border-radius: 9999px;
    border: 1px solid var(--control-border);
    padding: 6px 10px;
    background: var(--body-bg);
}

#nav-filter:focus {
    border-color: var(--focus-blue);
}

body #toolbar,
body #changelist .actions,
body .paginator {
    box-sizing: border-box;
}

body #toolbar {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
    padding: 8px 12px;
}

body #toolbar form #searchbar {
    border-radius: 9999px;
    border: 1px solid var(--control-border);
    padding: 6px 14px;
    min-width: 18rem;
    height: auto;
    vertical-align: middle;
}

body #changelist table thead th,
body .module table thead th {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.224px;
    text-transform: none;
    color: var(--body-medium-color);
}

tr.alt,
tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
    background: var(--body-bg);
}

body #result_list tbody tr > td,
#result_list tbody tr > th,
.dashboard .module table tbody tr > td,
.dashboard .module table tbody tr > th {
    border-bottom: 1px solid var(--hairline-color);
}

body #result_list tbody tr:last-child > td,
#result_list tbody tr:last-child > th,
.dashboard .module table tbody tr:last-child > td,
.dashboard .module table tbody tr:last-child > th {
    border-bottom: none;
}

body #result_list tbody tr:nth-child(even) > * {
    background: var(--darkened-bg);
}

body #result_list tbody tr:hover > * {
    background: color-mix(in srgb, var(--body-loud-color) 8%, var(--body-bg));
}

body #result_list tbody a:link,
body #result_list tbody a:visited {
    color: var(--link-fg);
    text-decoration: none;
}

body #result_list tbody a:hover,
body #result_list tbody a:focus-visible {
    color: var(--link-hover-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body #changelist tbody tr.selected > *:first-child,
#changelist tbody tr:has(.action-select:checked) > *:first-child {
    box-shadow: inset 3px 0 0 var(--link-fg);
}

body #changelist tbody tr.selected > *,
#changelist tbody tr:has(.action-select:checked) > * {
    background-color: var(--selected-row);
}

body #changelist-filter {
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

body #changelist-filter h2 {
    background: transparent;
    color: var(--body-loud-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    letter-spacing: -0.224px;
    text-transform: none;
    padding: 9px 16px;
}

body #changelist-filter h3 a.viewlink {
    padding-left: 28px;
}

body #changelist-filter h3 a.viewlink::before {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

body #changelist-filter h3,
body #changelist-filter details summary {
    color: var(--body-medium-color);
    font-weight: 600;
}

body #changelist-filter details > summary::before {
    color: var(--body-medium-color);
}

body #changelist .actions {
    padding: 8px 12px;
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
}

body #changelist .actions select {
    height: auto;
    border-radius: 9999px;
    padding: 5px 12px;
    border: 1px solid var(--control-border);
}

body #toolbar form input[type="submit"],
body #changelist .actions .button {
    height: auto;
    padding: 5px 16px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--button-bg);
    color: var(--button-fg);
    font-weight: 400;
    letter-spacing: -0.224px;
    box-shadow: none;
}

body #toolbar form input[type="submit"] {
    margin-left: 6px;
    vertical-align: middle;
}

body #toolbar form input[type="submit"]:hover,
body #changelist .actions .button:hover {
    background: var(--button-hover-bg);
    border-color: transparent;
}

body #changelist-filter a:link,
body #changelist-filter a:visited {
    padding: 5px 10px;
    border-radius: 9999px;
    color: var(--body-medium-color);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

body #changelist-filter li.selected {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

body #changelist-filter li a:link,
body #changelist-filter li a:visited {
    display: inline-block;
}

body #changelist-filter li.selected a:link,
#changelist-filter li.selected a:visited {
    background: var(--button-bg);
    color: var(--button-fg);
    font-weight: 600;
}

body #changelist-filter li:not(.selected) a:hover,
body #changelist-filter li:not(.selected) a:focus-visible {
    background: var(--body-bg);
    color: var(--body-loud-color);
}

body #changelist-filter li.selected a:hover,
body #changelist-filter li.selected a:focus-visible {
    background: var(--button-hover-bg);
    color: var(--button-fg);
}

body .paginator {
    background: var(--darkened-bg);
    border-top: 1px solid var(--hairline-color);
    padding: 9px 16px;
}

body input[type=text], input[type=password], input[type=email], input[type=url],
body input[type=number], input[type=tel],
body textarea, select, .vTextField {
    border-radius: 8px;
    border: 1px solid var(--control-border);
    padding: 6px 10px;
    background: var(--body-bg);
    color: var(--body-fg);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

body input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
body input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus,
body textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--focus-blue);
}

body .form-row {
    border-bottom: 1px solid var(--hairline-color);
    padding: 10px 16px;
}

body fieldset .form-row:last-child {
    border-bottom: none;
}

body .aligned label {
    color: var(--body-medium-color);
    font-weight: 600;
}

body .aligned .vTextField,
body .aligned input[type=url],
body .aligned input[type=email] {
    box-sizing: border-box;
    width: 100%;
    max-width: 34rem;
}

body .aligned textarea,
body .colM .aligned .vLargeTextField,
body .colMS .aligned .vLargeTextField,
body .colM .aligned .vXMLLargeTextField,
body .colMS .aligned .vXMLLargeTextField {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

body .button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 9999px;
    padding: 7px 16px;
    font-weight: 400;
    letter-spacing: -0.224px;
    border: 1px solid transparent;
    transition: background 200ms ease, transform 200ms ease;
}

body .button:active, input[type=submit]:active, input[type=button]:active,
body .submit-row input:active, a.button:active {
    transform: scale(0.95);
}

body .submit-row input[name="_continue"],
body .submit-row input[name="_addanother"],
body .submit-row input[name="_saveasnew"] {
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    border-color: var(--object-tools-fg);
}

body .submit-row input[name="_continue"]:hover,
body .submit-row input[name="_addanother"]:hover,
body .submit-row input[name="_saveasnew"]:hover {
    background: var(--object-tools-hover-bg);
    border-color: var(--object-tools-hover-bg);
    color: var(--object-tools-hover-fg);
}

body .submit-row {
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px 16px;
}

body .submit-row input.default {
    text-transform: none;
    font-weight: 400;
    letter-spacing: -0.224px;
}

body .submit-row a.deletelink {
    border-radius: 9999px;
    padding: 7px 16px;
    height: auto;
    line-height: 1.4;
    background: transparent;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
}

body .submit-row a.deletelink:hover,
body .submit-row a.deletelink:active {
    background: var(--error-fg);
    border-color: var(--error-fg);
    color: var(--body-bg);
}

.object-tools a:link,
.object-tools a:visited {
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    border: 1px solid var(--object-tools-fg);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.224px;
    text-transform: none;
    padding: 6px 14px;
    transition: background 200ms ease, color 200ms ease;
}

.object-tools a:hover {
    background: var(--object-tools-hover-bg);
    border-color: var(--object-tools-hover-bg);
    color: var(--object-tools-hover-fg);
}

body .calendar caption,
body .calendarbox h2 {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
}

body .selector-chosen-title {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
    border-bottom: 1px solid var(--hairline-color);
}

body .aligned .selector-chosen-title label,
body .selector-chosen-title label {
    color: var(--body-loud-color);
}

body .selector-chosen-title p,
body .selector-available-title p {
    color: var(--body-quiet-color);
}

body .selector-chosen .list-footer-display {
    background: var(--darkened-bg);
    color: var(--body-medium-color);
}

body .datetimeshortcuts .date-icon,
body .datetimeshortcuts .clock-icon {
    width: 17px;
    height: 17px;
    background: var(--body-quiet-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-size: 17px auto;
    mask-size: 17px auto;
}

body .datetimeshortcuts .date-icon {
    -webkit-mask-image: url(../img/icon-calendar.svg);
    mask-image: url(../img/icon-calendar.svg);
}

body .datetimeshortcuts .clock-icon {
    -webkit-mask-image: url(../img/icon-clock.svg);
    mask-image: url(../img/icon-clock.svg);
}

body .datetimeshortcuts a:hover .date-icon,
body .datetimeshortcuts a:focus .clock-icon,
body .datetimeshortcuts a:hover .clock-icon,
body .datetimeshortcuts a:focus .date-icon {
    background: var(--body-loud-color);
}

#content-related {
    background: transparent;
    clear: right;
}

#content-related .module {
    background: var(--body-bg);
}

#content-related .module h2 {
    margin-bottom: 12px;
}

#content-related h3 {
    font-size: 0.8125rem;
    color: var(--body-medium-color);
    margin: 0 0 8px;
}

#content-related .actionlist {
    margin: 6px 16px 12px;
}

.addlink,
.changelink,
.viewlink {
    position: relative;
    background-image: none;
    padding-left: 18px;
}

.addlink::before,
.changelink::before,
.viewlink::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 13px;
    height: 13px;
    background-color: var(--link-fg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.addlink::before,
.related-widget-wrapper-link.add-related::before {
    -webkit-mask-image: url(../img/icon-addlink.svg);
    mask-image: url(../img/icon-addlink.svg);
}

.changelink::before,
.related-widget-wrapper-link.change-related::before {
    -webkit-mask-image: url(../img/icon-changelink.svg);
    mask-image: url(../img/icon-changelink.svg);
}

.viewlink::before,
.related-widget-wrapper-link.view-related::before {
    -webkit-mask-image: url(../img/icon-viewlink.svg);
    mask-image: url(../img/icon-viewlink.svg);
}

a.addlink,
a.changelink {
    display: inline-block;
    padding: 3px 8px 3px 24px;
    border: 1px solid var(--button-bg);
    border-radius: 9999px;
    background: transparent;
    color: var(--button-bg);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

a.addlink::before,
a.changelink::before {
    left: 6px;
    top: 50%;
    background-color: var(--button-bg);
    transform: translateY(-50%);
}

body a.addlink:hover,
body a.addlink:focus-visible,
body a.changelink:hover,
body a.changelink:focus-visible,
.related-widget-wrapper-link:is(.add-related, .change-related):link:hover,
.related-widget-wrapper-link:is(.add-related, .change-related):link:focus-visible {
    background-color: var(--button-bg);
    border-color: var(--button-bg);
    color: var(--button-fg);
}

body a.addlink:hover::before,
body a.addlink:focus-visible::before,
body a.changelink:hover::before,
body a.changelink:focus-visible::before {
    background-color: var(--button-fg);
}

.related-widget-wrapper-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px 10px;
    border: 1px solid var(--button-bg);
    border-radius: 9999px;
    background: transparent;
    font-size: 0.8125rem;
    line-height: 1.5;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.related-widget-wrapper-link:link,
.related-widget-wrapper-link:visited {
    color: var(--button-bg);
}

.related-widget-wrapper-link img {
    display: none;
}

.related-widget-wrapper-link::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.related-widget-wrapper-link.add-related::after {
    content: "Add";
}

.related-widget-wrapper-link.change-related::after {
    content: "Change";
}

.related-widget-wrapper-link.view-related::after {
    content: "View";
}

.related-widget-wrapper-link.delete-related::after {
    content: "Delete";
}

.related-widget-wrapper-link.delete-related,
.related-widget-wrapper-link.delete-related:link,
.related-widget-wrapper-link.delete-related:visited {
    border-color: var(--error-fg);
    color: var(--error-fg);
}

.related-widget-wrapper-link.delete-related::before {
    -webkit-mask-image: url(../img/icon-deletelink.svg);
    mask-image: url(../img/icon-deletelink.svg);
}

.related-widget-wrapper-link:is(.view-related, .delete-related):link:hover,
.related-widget-wrapper-link:is(.view-related, .delete-related):link:focus-visible {
    color: var(--button-fg);
}

.related-widget-wrapper-link.view-related:link:hover,
.related-widget-wrapper-link.view-related:link:focus-visible {
    background-color: var(--button-bg);
    border-color: var(--button-bg);
}

.related-widget-wrapper-link.delete-related:link:hover,
.related-widget-wrapper-link.delete-related:link:focus-visible {
    background-color: var(--error-fg);
    border-color: var(--error-fg);
    color: var(--body-bg);
}

.object-tools a.addlink:hover,
.object-tools a.addlink:focus-visible {
    background: var(--object-tools-hover-bg);
    color: var(--object-tools-hover-fg);
}

.object-tools a.addlink::before {
    content: none;
}

#content-related .actionlist li.addlink::before,
#content-related .actionlist li.changelink::before {
    top: 0.2em;
}

ul.messagelist li {
    border-radius: 8px;
    border: 1px solid var(--hairline-color);
    margin: 0 24px 8px;
}

body.login #container {
    border-radius: 18px;
    border: 1px solid var(--border-color);
    margin: 8vh auto 0;
}

body.login #header {
    padding: 16px;
}

body.login .submit-row {
    background: none;
    border: none;
    padding: 8px 0 0;
}

body.login .submit-row input {
    width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

body .paginator {
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--hairline-color);
    color: var(--body-quiet-color);
}

body .paginator a:link,
body .paginator a:visited {
    min-width: 26px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--link-fg);
    text-align: center;
}

body .paginator a:hover,
body .paginator a:focus-visible {
    background: var(--darkened-bg);
    border-color: var(--border-color);
    color: var(--link-hover-color);
}

body .paginator .this-page {
    min-width: 26px;
    padding: 3px 9px;
    border: 1px solid var(--button-bg);
    border-radius: 9999px;
    background: var(--button-bg);
    color: var(--button-fg);
    font-weight: 600;
    text-align: center;
}

body .paginator a.showall,
body .paginator a.showall:hover {
    padding: 3px 0;
    border-color: transparent;
    background: none;
}

body.delete-confirmation form input[type="submit"] {
    border-radius: 9999px;
    padding: 7px 16px;
    background: var(--delete-button-bg);
    color: var(--button-fg);
}

body.delete-confirmation form input[type="submit"]:hover,
body.delete-confirmation form input[type="submit"]:active {
    background: var(--delete-button-hover-bg);
}

body.delete-confirmation form .cancel-link {
    height: auto;
    line-height: 1.5;
    border-radius: 9999px;
    padding: 7px 16px;
    border: 1px solid var(--object-tools-fg);
    background: transparent;
    color: var(--object-tools-fg);
}

body.delete-confirmation form .cancel-link:hover,
body.delete-confirmation form .cancel-link:active {
    background: var(--object-tools-hover-bg);
    color: var(--object-tools-hover-fg);
}

body input[type=checkbox],
body input[type=radio] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--link-fg);
    cursor: pointer;
}

body #result_list td.action-checkbox,
body #result_list th.action-checkbox-column {
    padding-inline: 12px;
}

body .related-widget-wrapper-link[aria-disabled="true"],
body .related-widget-wrapper-link:not([href]) {
    opacity: 1;
    border-color: var(--border-color);
    color: var(--body-quiet-color);
    cursor: default;
}

body .calendarbox,
body .clockbox {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    overflow: hidden;
}

body .calendar td.selected a,
body .calendar td a:hover,
body .calendar td a:focus-visible {
    background: var(--link-fg);
    color: #ffffff;
    border-radius: 6px;
}

body .calendar td.today a {
    background: var(--selected-row);
    color: var(--body-loud-color);
    border-radius: 6px;
    font-weight: 600;
}

body .calendar-cancel,
body .calendar-cancel a,
body .calendar-cancel a:link,
body .calendar-cancel a:visited {
    background: var(--darkened-bg);
    color: var(--body-medium-color);
    border-top: 1px solid var(--hairline-color);
}

body .calendar-cancel a:hover {
    background: var(--border-color);
    color: var(--body-loud-color);
}

body #changelist .results {
    overflow-x: auto;
}

body main.content,
body #content-main,
body #changelist {
    min-width: 0;
}

body #content {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    body #changelist {
        flex-direction: column;
        align-items: stretch;
    }

    body #changelist-filter {
        position: static;
        width: auto;
        max-width: none;
        margin: 12px 0 0;
        flex-basis: auto;
    }

    body #toolbar form #searchbar {
        min-width: 0;
    }

    body #content {
        padding: 16px;
    }

    body .object-tools {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    body .button:active,
    body input[type=submit]:active,
    body input[type=button]:active,
    body .submit-row input:active,
    body a.button:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    .addlink::before,
    .changelink::before,
    .viewlink::before,
    .related-widget-wrapper-link::before,
    body .datetimeshortcuts .date-icon,
    body .datetimeshortcuts .clock-icon {
        background-color: CanvasText;
    }

    a.addlink,
    a.changelink,
    .related-widget-wrapper-link,
    .object-tools a,
    body .submit-row a.deletelink {
        border-color: ButtonBorder;
    }
}