html {
    overflow: hidden;
}

body {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-900);
    font-family: var(--font-sans);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 5px;
    overflow: hidden;
}


h1, h2, h3, h4, h5, h6, ul {
    margin: unset;
    list-style: none;
    padding: unset;
}

.unset-margin { margin: unset; }
.unset-padding { padding: unset; }
.unset-border { border: unset; }


.button {
    --color-500: var(--color-neutral-500);
    --color-600: var(--color-neutral-600);
    --color-700: var(--color-neutral-700);
}
.button.primary {
    --color-500: var(--color-primary-500);
    --color-600: var(--color-primary-600);
    --color-700: var(--color-primary-700);
}
.button.green {
    --color-500: var(--color-green-500);
    --color-600: var(--color-green-600);
    --color-700: var(--color-green-700);
}
.button.amber {
    --color-500: var(--color-amber-500);
    --color-600: var(--color-amber-600);
    --color-700: var(--color-amber-700);
}
.button.red {
    --color-500: var(--color-red-500);
    --color-600: var(--color-red-600);
    --color-700: var(--color-red-700);
}

.button {
    text-decoration: unset;
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-400);
    font-size: var(--font-size-small);
    font-weight: var(--font-wight-semibold);
    color: var(--color-neutral-700);
    white-space: nowrap;
    padding: var(--spacing-x-small) var(--spacing-small);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    margin: 2px;
    white-space: normal;
}

.button.fill {
    background: var(--color-600);
    border-color: var(--color-600);
    color: var(--color-neutral-0);
}

.button.outline {
    border-color: var(--color-600);
    color: var(--color-600);
}

.button.small {
    font-size: var(--font-size-x-small);
    padding: var(--spacing-2x-small) var(--spacing-small);
}

.button.medium {
    font-size: var(--font-size-medium);
}

.button.large {
    font-size: var(--font-size-x-large);
}

.button.pill {
    border-radius: var(--border-radius-pill);
}

.button:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700)
}

.button.fill:hover {
    background: var(--color-500);
    border-color: var(--color-500);
}

.button.outline:hover {
    background: var(--color-600);
    border-color: var(--color-600);
}

.button:active {
    background: var(--color-primary-100);
    border-color: var(--color-primary-400);
    color: var(--color-primary-700);
}

.button.fill:active {
    background: var(--color-600);
    border-color: var(--color-600);
}

.button.outline:active {
    background: var(--color-700);
    border-color: var(--color-700);
}

.button.fill:hover, .button.outline:hover, .button.fill:active, .button.outline:active {
    color: var(--color-neutral-0);
}

.button:focus-visible {
    outline: 2px solid var(--color-primary-700);
}

.button:disabled, .button:disabled:hover, .button:disabled:active {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
    color: var(--color-neutral-700);
    opacity: 0.5;
}

.button.fill:disabled, .button.fill:disabled:hover, .button.fill:disabled:active {
    background: var(--color-600);
    border-color: var(--color-600);
    color: var(--color-neutral-0);
}

.button.outline:disabled, .button.outline:disabled:hover, .button.outline:disabled:active {
    border-color: var(--color-600);
    color: var(--color-600);
}

.button.plain {
    padding: 0 var(--spacing-2x-small);
}
.button.plain, .button.plain:hover, .button.plain:active {
    border: none;
    background: unset;
}


.button.dropdown {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.button.dropdown::after {
    content: '\F229';
    display: inline-block;
    font-family: bootstrap-icons !important;
    vertical-align: -.125em;
}

.button.dropdown.open::after {
    content: '\F235';
}


input, select, textarea, .input-wrapper {
    background: unset;
    color: unset;
    border: 1px solid var(--color-neutral-400);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-x-small) var(--spacing-medium);
    font-size: var(--font-size-medium);
    box-sizing: border-box;
}

input.small, select.small, textarea.small, .input-wrapper.small {
    padding: var(--spacing-2x-small) var(--spacing-small);
    font-size: var(--font-size-small);
}

input:hover, select:hover, textarea:hover, .input-wrapper:hover {
    border-color: var(--color-neutral-500);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, .input-wrapper:focus-within {
    outline: 2px solid var(--color-primary-700);
}

input:disabled, select:disabled, textarea:disabled, .input-wrapper:disabled {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
    opacity: 0.5;
}

.input-wrapper input, .input-wrapper input:hover, .input-wrapper input:focus-visible,
.input-wrapper textarea, .input-wrapper textarea:hover, .input-wrapper textarea:focus-visible {
    background: unset;
    border: none;
    outline: unset;
    padding: 0;
    width: 100%;
}

textarea.vertical-resize { resize: vertical; }
textarea.horizontal-resize { resize: horizontal; }
textarea.no-resize { resize: none; }

fieldset.no-border { border: unset; }


dialog::backdrop {
    background-color: var(--overlay-background-color);
}

dialog[open] {
    position: relative;
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--color-neutral-300);
    box-shadow: var(--shadow-x-large);
    border-radius: var(--border-radius-medium);
    width: 450px;
    height: 60%;
    max-width: 95%;
    max-height: 95%;
    background: var(--color-neutral-0);
    color: unset;
}

dialog.wide { width: 600px; }

dialog.narrow {
    max-width: 400px;
    width: max-content;
}

dialog.tall { height: 90%; }
dialog.short { height: max-content; }

.dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex-grow: 1;
}

.dialog-header {
    margin-bottom: var(--spacing-2x-large);
}

.dialog-inner {
    flex-grow: 1;
    overflow: auto;
    padding: 0 var(--spacing-medium);
}

.dialog-inner > * {
    margin-bottom: var(--spacing-large);
}

.dialog-spinner {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
}

.dialog-buttons {
    display: flex;
    margin-top: 30px;
    justify-content: end;
    gap: 7px;
}


.flat-radio {
    border: unset;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}

.flat-radio > label > input {
    display: none;
}

.flat-radio > label {
    cursor: pointer;
    flex: 50% 1 1;
    text-align: center;
    padding: 5px;
    border: 1px solid var(--color-neutral-400);
    border-right-width: 0;
    color: var(--color-neutral-700);
}

.flat-radio > label:first-of-type {
    border-top-left-radius: var(--border-radius-pill);
    border-bottom-left-radius: var(--border-radius-pill);
}

.flat-radio > label:last-of-type {
    border-right-width: 1px;
    border-top-right-radius: var(--border-radius-pill);
    border-bottom-right-radius: var(--border-radius-pill);
}

.flat-radio > label:hover {
    background: var(--color-primary-100);
}

.flat-radio > label:has(:checked) {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: var(--color-neutral-0);
}


c-filechooser {
    display: block;
    padding: var(--spacing-2x-small) var(--spacing-small);
    border: 2px dashed var(--color-neutral-300);
}

c-filechooser.dragover {
    border-color: var(--color-primary-500);
}

c-filechooser > p {
    text-align: center;
    font-size: small;
    color: var(--color-neutral-600);
}

c-filechooser > label {
    display: block;
    text-align: center;
    margin-top: 20px;
}

c-filechooser > table {
    width: 100%;
    font-size: var(--font-size-small);
}

c-filechooser > table td:first-child {
    padding-right: 20px;
    font-size: 11pt;
    overflow-wrap: anywhere;
}

c-filechooser > table td:nth-child(2) {
    font-size: small;
    white-space: nowrap;
}

c-filechooser > table td:last-child {
    width: 1px;
}


c-validation {
    display: block;
}


.c-list {
    overflow: auto;
}

.c-list > table {
    width: 100%;
    /* table-layout: fixed; */
    border-collapse: collapse;
    font-size: 14px;
}

.c-list > table th {
    text-align: start;
    position: sticky;
    top: 0;
    padding: 6px 20px 6px 5px;
    font-size: 12px;
    width: 300px;
    background: var(--color-neutral-0);
}

.c-list > table th:last-child {
    width: unset;
}

.c-list > table th::after {
    content: '';
    position: absolute;
    border-bottom: 1px solid var(--color-neutral-100);
    border-top: 1px solid var(--color-neutral-100);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.c-list > table th.sortable {
    cursor: pointer;
}

.c-list > table th:focus-visible {
    outline: none;
    border-bottom: 1px solid var(--color-primary-400);
}

.c-list > table th.sortable:hover {
    background: var(--color-primary-50);
}

.c-list > table th.sortable:active {
    background: var(--color-primary-50);
}

.c-list > table th.sort-asc::before {
    content: '\\2191';
    margin-right: 2px;
}

.c-list > table th.sort-desc::before {
    content: '\\2193';
    margin-right: 2px;
}

.c-list > table th.compact {
    width: 1px;
    text-wrap: nowrap;
}

.c-list > table td {
    overflow-wrap: break-word;
    padding: 10px 20px 10px 5px;
    border-bottom: 1px solid var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-50);
}

.c-list > table td.button-cell {
    text-wrap: nowrap;
    text-align: right;
}

.c-list > table tbody:nth-of-type(2) > tr:hover {
    background: var(--color-primary-50)
}

.c-list > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-list.choose-list > ul > li {
    margin: 2px;
    color: var(--color-neutral-700);
    cursor: pointer;
}

.c-list.choose-list > ul > li:hover {
    background: var(--color-primary-50);
    color: var(--color-neutral-1000);
}

.c-list.choose-list > ul > li:focus-visible {
    outline: 2px solid var(--color-primary-700);
}

.c-list.pad-items > ul > li {
    padding: var(--spacing-x-small) var(--spacing-medium);
}

.c-list .end {
    text-align: center;
    margin: 15px;
    color: var(--color-neutral-600);
    font-size: 11pt;
}

.c-list .end:empty {
    display: none;
}

.c-list:not(.selectable) .c-list-selector {
    display: none;
}

ul.pill-list, .pill-list > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-x-small);
}

ul.pill-list > li, .pill-list > ul > li {
    border: 1px solid var(--color-neutral-400);
    padding: var(--spacing-2x-small) var(--spacing-small);
    border-radius: var(--border-radius-pill);
}

.pill-list .pill-list-x {
    padding: 0;
    margin-right: calc(-1 * var(--spacing-2x-small));
}


c-dropdown {
    display: block;
    position: fixed;
    background: var(--color-neutral-0);
    border: solid 1px var(--color-neutral-200);
    border-radius: var(--border-radius-medium);
    /* padding: var(--spacing-x-small) 0; */
    box-shadow: var(--shadow-small);
    z-index: var(--z-index-dropdown);
    max-height: 500px;
    overflow: auto;
    box-sizing: border-box;
}

.c-dropdown-search-wrapper {
    margin: var(--spacing-2x-small);
}


c-tooltip {
    display: block;
    padding: var(--spacing-2x-small) var(--spacing-x-small);
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-small);
    border: 1px solid var(--color-neutral-400);
    width: max-content;
    min-width: min-content;
    max-width: 30em;
    position: fixed;
    border-radius: var(--border-radius-large);
    font-size: var(--font-size-x-small);
    opacity: 0;
    transition: opacity 0.5s 0.5s;
    z-index: var(--z-index-tooltip);
}


c-checkbox:focus-visible {
    outline: 2px solid var(--color-primary-700);
}




.skeleton {
    height: 12px;
    border-radius: 10px;
    width: 75%;
    background-image: linear-gradient(to right, var(--color-neutral-200), var(--color-neutral-100), var(--color-neutral-100), var(--color-neutral-200));
    background-size: 400% 100%;
    animation: skeleton 8s ease-in-out infinite;
}

@keyframes skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}


.fading-notification {
    display: flex;
    gap: 5px;
    padding-right: 0;
}

.fading-notification > :first-child {
    flex-grow: 1;
}

.fading-notification > :last-child {
    flex: 0 1 auto;
    font-size: var(--font-size-medium);
}


.progress-bar {
    background: var(--color-primary-50);
    height: 5px;
    width: 100%;
    min-width: 200px;
    border-radius: 10px;
    --value: 0;
}

.progress-bar::after {
    content: '';
    display: block;
    height: 100%;
    background: var(--color-green-700);
    width: var(--value);
    border-radius: 10px;
    transition: width 1s;
}

.progress-bar.orange::after {
    background: var(--color-orange-700);
}

.progress-bar.red::after {
    background: var(--color-red-700);
}


.fade {
    opacity: 0;
    transition: opacity 1s;
}
.fade-in { opacity: 1; }
.fade-out { opacity: 0; }


.input-label {
    margin-bottom: var(--spacing-x-small);
    font-size: var(--font-size-small);
}


.primary-text { color: var(--color-primary-700); }
.red-text { color: var(--color-red-700); }
.green-text { color: var(--color-green-700); }
.blue-text { color: var(--color-blue-700); }
.amber-text { color: var(--color-amber-700); }
.muted-text { color: var(--color-neutral-600); }


.scroller { overflow: auto; }
.scroller.small { max-height: 200px; }

.flex-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.flex-row.wrap { flex-wrap: wrap; }

.flex-row.space-between { justify-content: space-between; }

.flex-row.center { align-items: center; }

.expand { flex-grow: 1; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

.hide-empty:empty { display: none; }


.small-text { font-size: var(--font-size-small); }
.large-text { font-size: var(--font-size-large); }
.x-large-text { font-size: var(--font-size-x-large); }

.center-align { text-align: center; }
.left-align { text-align: left; }
.right-align { text-align: right; }

.cursor-pointer { cursor: pointer; }

.full-width { width: 100%; }
.three-quarter-width { width: 75%; }
.half-width { width: 50%; }
.quarter-width { width: 25%; }

.margin-bottom-x-small { margin-bottom: var(--spacing-x-small); }
.margin-bottom-small { margin-bottom: var(--spacing-small); }
.margin-bottom-medium { margin-bottom: var(--spacing-medium); }
.margin-bottom-large { margin-bottom: var(--spacing-large); }

.margin-top-x-small { margin-top: var(--spacing-x-small); }
.margin-top-small { margin-top: var(--spacing-small); }
.margin-top-medium { margin-top: var(--spacing-medium); }
.margin-top-large { margin-top: var(--spacing-large); }