*, *::before, *::after {
    box-sizing: border-box;
}

html {
    --primary-color: #c71d1d;
    --brand-logo: url('bifarma/logo.svg');
    --brand-logo-height: 123px;
    --brand-logo-width: 241px;
    --border-radius: .375rem;
}

body {
    background: #f8f7fa;
    color: #444050;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
}

html, body, dialog .dialog-content {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

:any-link {
    color: var(--primary-color);
}

[x-cloak] {
    display: none !important;
}

body > header, main, body > div, thead, select, #module-access tbody tr:has(th[colspan]) {
    background-color: white;
}

body > header, body > div {
    box-shadow: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
}

body > header {
    text-align: center;
}

h1 {
    line-height: 0;
    margin: 0;
}

h1::before {
    content: '';
    display: inline-block;
    width: var(--brand-logo-width);
    height: var(--brand-logo-height);
    background: var(--brand-logo);
}

h1 span, .login-page label span, a[class^='icon-'] span, thead label span, #module-access label span, dialog .close-dialog span, .lookup-button span {
    position: absolute;
    left: -9999px;
}

main {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 1.5rem;
    padding: 1.5em;
    box-shadow: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16);
}

main.htmx-request::after, dialog.htmx-request::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #0003 url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="%23494949"%3E%3Crect y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="30" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="60" width="15" height="140" rx="6"%3E%3Canimate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="90" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="120" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3C/svg%3E') center no-repeat;
}

main, body > div, body > div nav, .table-scroll {
    overflow: auto;
}

main > :first-child,
.login-page h2 {
    margin-block-start: 0;
}

body > div, main {
    display: flex;
    flex-direction: column;
}

body > div {
    padding-inline: 0.75rem;
}

body > div form, .row-actions, .lookup-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1ch;
}

body > div form:last-of-type {
    flex-direction: column;
    margin: .5em 0;
}

summary, button {
    cursor: pointer;
}

body > div nav, .lookup-input > input {
    flex: 1;
}

nav > ul {
    list-style: none;
    padding: 0;
}

body > div nav summary, body > div nav details li {
    padding-block: .5rem;
    padding-inline: .75rem;
    border-radius: var(--border-radius);
}

body > div nav details ul {
    padding-inline-start: 1.7rem;
}

body > div nav summary:hover, body > div nav details li:hover {
    background-color: #e6e6e8;
}

body > div nav :any-link {
    text-decoration: none;
    color: inherit;
    display: block;
    inline-size: 100%;
}

.login-page, form, label {
    display: flex;
}

.login-page {
    align-items: center;
    flex-direction: column-reverse;
    --padding: .75rem;
}

.login-page header, .login-page main {
    inline-size: 100%;
    max-inline-size: calc(16.75rem + var(--padding) * 2);
    padding: 0 var(--padding);
}

.login-page main {
    padding-block-start: var(--padding);
    margin: auto 0 0;
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
    box-shadow: 0 -0.3875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.login-page header {
    padding-block-end: var(--padding);
    margin: 0 0 auto;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
    box-shadow: 0 0.3875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.login-page form {
    border-block: 1px solid #e6e6e8;
    padding-block: 1em;
}

form, label, .login-page fieldset {
    flex-direction: column;
    gap: 1em;
}

.validation-summary-valid,
.field-validation-valid,
form br {
    display: none;
}

label:has(:user-invalid),
label:has(.input-validation-error),
.validation-summary-errors {
    color: #ff4c51;
}

select:user-invalid,
input:user-invalid,
.input-validation-error {
    border: none;
    outline: 2px solid #ff4c51;
}


.validation-summary-errors ul {
    padding-inline-start: 1em;
}

form, table, .login-page input {
    inline-size: 100%;
}

fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));
    gap: 1.5rem;
    border: none;
    padding: 0;
    margin: 0;
}

body > div fieldset, .login-page fieldset {
    display: flex;
}

label {
    gap: .5em;
    align-items: stretch;
}

label:has(> input:is([type=checkbox], [type=radio])), body > div label, .pagination label {
    flex-direction: row;
    align-items: center;
}

label:has(> input:is([type=checkbox], [type=radio])) {
    gap: 0;
}

label:has(:user-invalid) {
    color: #c71d1d;
}

select:user-invalid, input:user-invalid {
    border: none;
    outline: 2px solid #c71d1d;
}

input, button, select {
    font: inherit;
}

select,
.multiselect-dropdown ul,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"] {
    border: 1px solid #e6e6e8;
    padding: .426rem .9375rem;
    line-height: 1.625;
}

thead input,
thead select {
    inline-size: 100%;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
.page-actions a,
button {
    font-size: 0.9375rem;
    border-radius: var(--border-radius);
}

.page-actions a,
button {
    color: white;
    background-color: var(--primary-color);
    border: none;
    padding: .4812rem 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.multiselect-dropdown {
    display: inline-block;
    position: relative;
}

.multiselect-dropdown select {
    display: none;
}

.multiselect-dropdown button {
    display: inline-flex;
    text-align: start;
    color: inherit;
    font-weight: inherit;
    background-color: ButtonFace;
    padding-inline-end: .25em;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1.25em;
}

.multiselect-dropdown button::after {
    content: '';
    background: url('data:image/svg+xml,%3Csvg width="48px" height="48px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M24,27.2,13.4,16.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z"/%3E%3C/svg%3E') center / contain no-repeat;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.multiselect-dropdown ul {
    display: none;
    background-color: white;
    list-style: none;
    position: absolute;
    z-index: 1;
    padding: .25em .25ch;
    border-radius: 10px;
    margin: 0;
    width: 100%;
    min-width: 16ch;
    max-height: 15em;
    overflow: scroll;
    resize: both;
}

.multiselect-dropdown ul[style*="height"] {
    max-height: unset;
}

.multiselect-dropdown [aria-expanded = "true"] + ul {
    display: block;
}

.multiselect-dropdown li:first-child {
    padding-block-end: .15em;
    border-block-end: 1px solid #e6e6e8;
}

.multiselect-dropdown li:nth-child(2) {
    padding-top: .15em;
}

table {
    border-block-start: 1px solid #e6e6e8;
}

th, td {
    padding: .625rem;
    border-block-end: 1px solid #e6e6e8;
}

th {
    position: relative;
}

thead, #module-access tbody tr:has(th[colspan]) {
    position: sticky;
    z-index: 10;
}

thead {
    inset-block-start: 0;
}

#module-access tbody tr:has(th[colspan]) {
    inset-block-start: 2.6em;
}

thead .sort::after {
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    display: flex;
    align-items: center;
}

thead .sort.Asc::after {
    content: '⬇';
}

thead .sort.Desc::after {
    content: '⬆';
}

thead input, thead select {
    min-width: 9ch;
}

td.numeric {
    text-align: right;
}

.page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    line-height: 2;
    margin-block-end: 1em;
}

.page-actions h2 {
    margin: 0;
}

a[class^="icon-"]::before {
    content: '';
    block-size: 22px;
    inline-size: 22px;
    display: block;
    background: var(--primary-color);
    mask: 0 0 / 100% 100% no-repeat;
}

a.icon-edit::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.7279 9.57627L14.3137 8.16206L5 17.4758V18.89H6.41421L15.7279 9.57627ZM17.1421 8.16206L18.5563 6.74785L17.1421 5.33363L15.7279 6.74785L17.1421 8.16206ZM7.24264 20.89H3V16.6473L16.435 3.21231C16.8256 2.82179 17.4587 2.82179 17.8492 3.21231L20.6777 6.04074C21.0682 6.43126 21.0682 7.06443 20.6777 7.45495L7.24264 20.89Z'%3E%3C/path%3E%3C/svg%3E");
}

a.icon-duplicate::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z'%3E%3C/path%3E%3C/svg%3E");
}

a.icon-delete::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z'%3E%3C/path%3E%3C/svg%3E");
}

a.icon-database::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 12.5C5 12.8134 5.46101 13.3584 6.53047 13.8931C7.91405 14.5849 9.87677 15 12 15C14.1232 15 16.0859 14.5849 17.4695 13.8931C18.539 13.3584 19 12.8134 19 12.5V10.3287C17.35 11.3482 14.8273 12 12 12C9.17273 12 6.64996 11.3482 5 10.3287V12.5ZM19 15.3287C17.35 16.3482 14.8273 17 12 17C9.17273 17 6.64996 16.3482 5 15.3287V17.5C5 17.8134 5.46101 18.3584 6.53047 18.8931C7.91405 19.5849 9.87677 20 12 20C14.1232 20 16.0859 19.5849 17.4695 18.8931C18.539 18.3584 19 17.8134 19 17.5V15.3287ZM3 17.5V7.5C3 5.01472 7.02944 3 12 3C16.9706 3 21 5.01472 21 7.5V17.5C21 19.9853 16.9706 22 12 22C7.02944 22 3 19.9853 3 17.5ZM12 10C14.1232 10 16.0859 9.58492 17.4695 8.89313C18.539 8.3584 19 7.81342 19 7.5C19 7.18658 18.539 6.6416 17.4695 6.10687C16.0859 5.41508 14.1232 5 12 5C9.87677 5 7.91405 5.41508 6.53047 6.10687C5.46101 6.6416 5 7.18658 5 7.5C5 7.81342 5.46101 8.3584 6.53047 8.89313C7.91405 9.58492 9.87677 10 12 10Z'%3E%3C/path%3E%3C/svg%3E");
}

#index-table_wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dt-container .dt-layout-row.dt-layout-table {
    align-items: stretch;
    overflow: hidden;
}

.dt-layout-full {
    overflow: auto;
}

.pagination, .pagination ul {
    display: flex;
}

.pagination {
    margin-block-start: .5rem;
    justify-content: space-between;
}

.pagination fieldset, .pagination form {
    flex-direction: row;
    align-items: center;
}

.pagination ul {
    gap: .75ch;
}

.pagination [aria-current="page"] {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
}

#snackbar [role="alert"] {
    cursor: pointer;
    background-color: #3f3b37;
    color: #ffffff;
    padding: 2rem;
    min-width: 28.8rem;
    max-width: 56.8rem;
    border-radius: 2px;
    position: fixed;
    translate: -50% 100%;
    left: 50%;
    bottom: 0;
    transition: translate;
    transition-duration: 300ms;
}

#snackbar [role="alert"].open {
    translate: -50%;
}

dialog, dialog .dialog-content {
    display: flex;
    flex-direction: column;
}

dialog header {
    display: flex;
    justify-content: end;
}

dialog .close-dialog, .lookup-button {
    border: 0;
    padding: 0;
    background: none;
}

dialog .close-dialog::before, .lookup-button::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
    display: block;
    inline-size: 1.6rem;
    aspect-ratio: 1;
    line-height: .1;
}

dialog .close-dialog::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.lookup-button::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
}

#module-access label {
    justify-content: center;
}

#module-access tbody th {
    text-align: start;
}

#module-access tbody th[scope="row"] {
    font-weight: normal;
}

#module-access .handle {
    margin-inline-end: .5ch;
    cursor: grab;
}

#module-access .handle::before {
    content: '⠿';
}

#module-access .sortable-ghost {
    background-color: #fff6b2;
}

@media (max-width: 64rem) {
    html, body {
        height: auto;
        overflow-block: scroll;
    }

    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    main {
        grid-column: 1;
        grid-row: 1;
        margin-inline: 0;
        margin-block-start: 0;
    }

    body > header {
        grid-row: 2;
    }

    body > div {
        grid-row: 3;
    }
}