:root {
    --mire-blue-50:  hsl(239 42% 95%);
    --mire-blue-100: hsl(239 42% 90%);
    --mire-blue-200: hsl(239 42% 80%);
    --mire-blue-300: hsl(239 42% 70%);
    --mire-blue-400: hsl(239 42% 60%);
    --mire-blue-500: hsl(239 42% 50%);
    --mire-blue-600: hsl(239 42% 40%);
    --mire-blue-700: hsl(239 42% 30%);
    --mire-blue-800: hsl(239 42% 25%);
    --mire-blue-900: hsl(239 42% 20%);
    --mire-blue-950: hsl(239 42% 15%);

    --mire-purple-50:  hsl(264 28% 95%);
    --mire-purple-100: hsl(264 28% 90%);
    --mire-purple-200: hsl(264 28% 80%);
    --mire-purple-300: hsl(264 28% 70%);
    --mire-purple-400: hsl(264 28% 60%);
    --mire-purple-500: hsl(264 28% 55%);
    --mire-purple-600: hsl(264 28% 50%);
    --mire-purple-700: hsl(264 28% 45%);
    --mire-purple-800: hsl(264 28% 35%);
    --mire-purple-900: hsl(264 28% 25%);
    --mire-purple-950: hsl(264 28% 20%);

    --mire-orange-50:  hsl(32 90% 95%);
    --mire-orange-100: hsl(32 90% 85%);
    --mire-orange-200: hsl(32 90% 75%);
    --mire-orange-300: hsl(32 90% 65%);
    --mire-orange-400: hsl(32 90% 60%);
    --mire-orange-500: hsl(32 90% 55%);
    --mire-orange-600: hsl(32 90% 50%);
    --mire-orange-700: hsl(32 90% 45%);
    --mire-orange-800: hsl(32 90% 35%);
    --mire-orange-900: hsl(32 90% 30%);
    --mire-orange-950: hsl(32 90% 25%);

    --mire-yellow-50:  hsl(55 86% 95%);
    --mire-yellow-100: hsl(55 86% 85%);
    --mire-yellow-200: hsl(55 86% 75%);
    --mire-yellow-300: hsl(55 86% 65%);
    --mire-yellow-400: hsl(55 86% 60%);
    --mire-yellow-500: hsl(55 86% 55%);
    --mire-yellow-600: hsl(55 86% 50%);
    --mire-yellow-700: hsl(55 86% 45%);
    --mire-yellow-800: hsl(55 86% 35%);
    --mire-yellow-900: hsl(55 86% 30%);
    --mire-yellow-950: hsl(55 86% 25%);

    --sl-color-primary-50: var(--mire-blue-50);
    --sl-color-primary-100: var(--mire-blue-100);
    --sl-color-primary-200: var(--mire-blue-200);
    --sl-color-primary-300: var(--mire-blue-300);
    --sl-color-primary-400: var(--mire-blue-400);
    --sl-color-primary-500: var(--mire-blue-500);
    --sl-color-primary-600: var(--mire-blue-600);
    --sl-color-primary-700: var(--mire-blue-700);
    --sl-color-primary-800: var(--mire-blue-800);
    --sl-color-primary-900: var(--mire-blue-900);
    --sl-color-primary-950: var(--mire-blue-950);
}

@font-face {
  font-family: "girolight";
  src: url("girolight.otf");
}

.bg-neutral-100 { background-color: var(--sl-color-neutral-100); }
.bg-white { background-color: var(--sl-color-neutral-0); }
.text-white { color: var(--sl-color-neutral-0); }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.font-bold { font-weight: 700; }
.h-5  { height: 1.25rem; }
.h-8  { height: 2rem; }
.h-12  { height: 3rem; }
.h-24  { height: 6rem; }
.h-48  { height: 12rem; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.border-r { border-right: 1px solid var(--sl-color-neutral-300); }
.mt-4 { margin-top: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.relative { position: relative; }
.text-center { text-align: center; }
.text-sm { font-size: var(--sl-font-size-small); }
.text-xs { font-size: 0.75rem; }

header > div:first-child sl-button::part(base),
footer sl-button::part(base) {
    color: var(--sl-color-neutral-700);
}

sl-button.text-white::part(base) {
    color: var(--sl-color-neutral-0);
}

sl-button.font-bold::part(base) {
    font-weight: 700;
}

p {
    margin: 1rem 0;
    text-align: justify;
}

sl-alert::part(message) {
    padding: var(--sl-spacing-small);
}

sl-input {
    padding: 0.5rem; 0;
}

h1 {
    font-size: 1.75rem;
    margin: 0;
}

h2 {
    font-size: 1.5rem;
    margin: 0;
}

h3 {
    font-size: 1.25rem;
    margin: 0;
}

h4 {
    font-size: 1rem;
    margin: 0;
}

body {
    font-family: var(--sl-input-font-family);
    background-color: var(--sl-color-neutral-0);
    color: var(--sl-color-neutral-1000);
    min-height: 100vh;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
}

a, sl-button[variant="text"]::part(base):hover {
    text-underline-offset: 4px;
    text-decoration: underline;
}

header > div {
    padding: 0.25rem 2rem;
}

header > div:last-child {
    color: var(--sl-color-neutral-0);
    background-color: var(--sl-color-primary-600);
}

footer {
    background-color: var(--sl-color-neutral-200);
    padding: 1rem 0 2rem 0;
    border-top: 1px solid var(--sl-color-neutral-400);
}

footer > div:last-child {
    padding-top: 1rem;
    margin: 1rem 20% 0 20%;
    border-top: 1px solid var(--sl-color-neutral-400);
}

#messages {
    position: fixed;
    width: 50%;
    right: 25%;
    top: 2rem;
    z-index: 999;
}

sl-divider {
    --spacing: var(--sl-spacing-x-small);
}

sl-breadcrumb sl-button::part(label) {
    padding-right: 0;
}

sl-breadcrumb-item::part(label) {
    color: var(--sl-color-neutral-0);
}

sl-breadcrumb-item:not(:first-child) sl-button::part(label) {
    padding-left: 0;
}

sl-breadcrumb-item:not(:first-child) sl-button::part(base) {
    color: var(--sl-color-neutral-0);
}

header sl-dropdown {
    color: var(--sl-color-neutral-0);
}

header sl-dropdown sl-button::part(base) {
    background: transparent;
    color: inherit;
    border: none;
}

table {
    font-size: var(--sl-font-size-small);
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sl-color-neutral-200);
}

th {
    background-color: var(--sl-color-neutral-200);
    white-space: nowrap;
}

thead  {
    position: sticky;
    top: -1px;
    z-index: 9;
}

td:first-child {
    width: 4rem;
}

:not(:defined) {
    visibility: hidden;
}

dialog {
    border: none;
    background-color: transparent;
    outline: none;
}

dialog::backdrop {
    background-color: rgba(0,0,0,0.7)
}

sl-tree {
    color: var(--sl-color-neutral-0);
    background-color: var(--mire-blue-900);
    padding: 1rem 0;
}

sl-tree sl-button::part(label) {
    padding-left: 0;
}

sl-tree-item {
    --indent-size: var(--sl-spacing-small);
}

sl-tree sl-button::part(base) {
    color: var(--sl-color-neutral-0);
}

sl-tree-item::part(label),
sl-tree-item::part(expand-button){
    color: var(--sl-color-neutral-0);
    font-size: var(--sl-font-size-small);
    font-weight: var(--sl-font-weight-semibold);
}

sl-tree-item::part(item--selected) {
    background-color: transparent;
    border: none;
}

sl-details sl-button[variant="text"]::part(base) {
    justify-content: start;
}

sl-details sl-button[variant="text"]::part(label) {
    padding-left: 0;
}

sl-breadcrumb-item::part(separator) {
    color: var(--sl-color-neutral-0);
}

main {
    flex: 1;
    padding: 2rem;
}

.drag {
    outline: 4px dashed var(--mire-orange-400);
    outline-offset: 0.5rem;
}

sl-alert[variant=success]::part(base) {
    background-color: var(--sl-color-success-50);
}

sl-alert[variant=primary]::part(base) {
    background-color: var(--sl-color-primary-50);
}

sl-alert[variant=danger]::part(base) {
    background-color: var(--sl-color-danger-50);
}

sl-card {
    --padding: var(--sl-spacing-small);
}

sl-card sl-button::part(label) {
    padding-left: 0;
}

sl-tree-item[selected]::part(label) {
    border-left: 3px solid var(--mire-orange-400);
    padding-left: 0.5rem;
    position: relative;
    left: calc(-0.5rem - 3px);
}

sl-tree-item.back::part(expand-button) {
    padding-left: 0rem;
    width: 0rem;
}

table td sl-input::part(base) {
    border-radius: 0px;
}

sl-option::part(base) {
    font-size: var(--sl-input-font-size-small);
}