@charset "UTF-8";
/* all css includes utilities */
:root {
  /* fonts */
  --sans-serif-fonts: Arial, sans-serif;
  --serif-fonts: Palatino, serif;
  --monospace-fonts: "Lucida Console", "Monaco", monospace;
  --fantasy-fonts: Papyrus,fantasy;
  --cursive-fonts: 'Brush Script MT', cursive;
  --base-font-size: $base-font-size;
  --base-line-height: 1.5;
  --base-line-height-head: 1;
  --base-line-height-small: 1.75;
  --base-letter-spacing: 0.05em;
  /* pixel scales ---------------------------- */
  /* nagative scales */
  --px-n3: 0.25rem;
  --px-n2: 0.75rem;
  --px-n1: 0.5rem;
  /* positive scales */
  --px-0: 1rem;
  --px-p1: 1.5rem;
  --px-p2: 2rem;
  --px-p3: 3rem;
  --px-p4: 4rem;
  --px-p5: 6rem;
  --px-p6: 8rem;
  --px-p7: 12rem;
  --px-p8: 16rem;
  --px-p9: 24rem;
  --px-p10: 32rem;
  --px-p11: 40rem;
  --px-p12: 48rem;
  /* ------------------------------------------*/
  /* fonts scales */
  --fs-0: 10px;
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;
  --fs-5: 20px;
  --fs-6: 24px;
  --fs-7: 30px;
  --fs-8: 36px;
  --fs-9: 48px;
  --fs-10: 60px;
  --fs-11: 72px;
  /* ------------------------------------------*/
  /* colors */
  --primary-0: hsl(230, 80%, 95%);
  --primary-1: hsl(230, 80%, 91%);
  --primary-2: hsl(230, 80%, 87%);
  --primary-3: hsl(230, 80%, 79%);
  --primary-4: hsl(230, 80%, 72%); /* default primary */
  --primary-5: hsl(230, 80%, 59%);
  --primary-6: hsl(230, 80%, 50%);
  --primary-7: hsl(230, 80%, 41%);
  --primary-8: hsl(230, 80%, 32%);
  --primary-9: hsl(230, 80%, 23%);
  --secondary-0: hsl(24, 80%, 94%);
  --secondary-1: hsl(24, 80%, 90%);
  --secondary-2: hsl(24, 80%, 86%);
  --secondary-3: hsl(24, 80%, 77%);
  --secondary-4: hsl(24, 80%, 68%);
  --secondary-5: hsl(24, 80%, 59%);
  --secondary-6: hsl(24, 80%, 50%);
  --secondary-7: hsl(24, 80%, 41%);
  --secondary-8: hsl(24, 80%, 32%);
  --secondary-9: hsl(24, 80%, 23%);
  /* no-custom generation from  https://hypejunction.github.io/color-wizard/ */
  /* Color suffix 0-4 for dark text agiant white background */
  /* Color suffix 8-9 for white text and being dark text for 0-4 of the same shad */
  /* Removing color shad 5-6-7 since contrast ratio */
  /* System colors are red (error), green (success), blue (info) */
  /* Grey is neutral color */
  --red-0: hsl(0, 80%, 94%);
  --red-1: hsl(0, 80%, 90%);
  --red-2: hsl(0, 80%, 86%);
  --red-3: hsl(0, 80%, 77%);
  --red-4: hsl(0, 80%, 68%);
  --red-5: hsl(0, 80%, 59%);
  --red-6: hsl(0, 80%, 50%);
  --red-7: hsl(0, 80%, 41%);
  --red-8: hsl(0, 80%, 32%);
  --red-9: hsl(0, 80%, 23%);
  --pink-0: hsl(339, 80%, 94%);
  --pink-1: hsl(339, 80%, 90%);
  --pink-2: hsl(339, 80%, 86%);
  --pink-3: hsl(339, 80%, 77%);
  --pink-4: hsl(339, 80%, 68%);
  --pink-5: hsl(339, 80%, 59%);
  --pink-6: hsl(339, 80%, 50%);
  --pink-7: hsl(339, 80%, 41%);
  --pink-8: hsl(339, 80%, 32%);
  --pink-9: hsl(339, 80%, 23%);
  --grape-0: hsl(288, 80%, 94%);
  --grape-1: hsl(288, 80%, 90%);
  --grape-2: hsl(288, 80%, 86%);
  --grape-3: hsl(288, 80%, 77%);
  --grape-4: hsl(288, 80%, 68%);
  --grape-5: hsl(288, 80%, 59%);
  --grape-6: hsl(288, 80%, 50%);
  --grape-7: hsl(288, 80%, 41%);
  --grape-8: hsl(288, 80%, 32%);
  --grape-9: hsl(288, 80%, 23%);
  --violet-0: hsl(255, 80%, 94%);
  --violet-1: hsl(255, 80%, 90%);
  --violet-2: hsl(255, 80%, 86%);
  --violet-3: hsl(255, 80%, 77%);
  --violet-4: hsl(255, 80%, 68%);
  --violet-5: hsl(255, 80%, 59%);
  --violet-6: hsl(255, 80%, 50%);
  --violet-7: hsl(255, 80%, 41%);
  --violet-8: hsl(255, 80%, 32%);
  --violet-9: hsl(255, 80%, 23%);
  --indigo-0: hsl(230, 80%, 95%);
  --indigo-1: hsl(230, 80%, 91%);
  --indigo-2: hsl(230, 80%, 87%);
  --indigo-3: hsl(230, 80%, 79%);
  --indigo-4: hsl(230, 80%, 72%);
  --indigo-5: hsl(230, 80%, 59%);
  --indigo-6: hsl(230, 80%, 50%);
  --indigo-7: hsl(230, 80%, 41%);
  --indigo-8: hsl(230, 80%, 32%);
  --indigo-9: hsl(230, 80%, 23%);
  --blue-0: hsl(208, 80%, 94%);
  --blue-1: hsl(208, 80%, 90%);
  --blue-2: hsl(208, 80%, 86%);
  --blue-3: hsl(208, 80%, 77%);
  --blue-4: hsl(208, 80%, 68%);
  --blue-5: hsl(208, 80%, 59%);
  --blue-6: hsl(208, 80%, 50%);
  --blue-7: hsl(208, 80%, 41%);
  --blue-8: hsl(208, 80%, 32%);
  --blue-9: hsl(208, 80%, 23%);
  --cyan-0: hsl(188, 80%, 94%);
  --cyan-1: hsl(188, 80%, 90%);
  --cyan-2: hsl(188, 80%, 86%);
  --cyan-3: hsl(188, 80%, 77%);
  --cyan-4: hsl(188, 80%, 68%);
  --cyan-5: hsl(188, 80%, 59%);
  --cyan-6: hsl(188, 80%, 50%);
  --cyan-7: hsl(188, 80%, 41%);
  --cyan-8: hsl(188, 80%, 32%);
  --cyan-9: hsl(188, 80%, 23%);
  --teal-0: hsl(162, 80%, 94%);
  --teal-1: hsl(162, 80%, 90%);
  --teal-2: hsl(162, 80%, 86%);
  --teal-3: hsl(162, 80%, 77%);
  --teal-4: hsl(162, 80%, 68%);
  --teal-5: hsl(162, 80%, 59%);
  --teal-6: hsl(162, 80%, 50%);
  --teal-7: hsl(162, 80%, 41%);
  --teal-8: hsl(162, 80%, 32%);
  --teal-9: hsl(162, 80%, 23%);
  --green-0: hsl(131, 80%, 94%);
  --green-1: hsl(131, 80%, 90%);
  --green-2: hsl(131, 80%, 86%);
  --green-3: hsl(131, 80%, 77%);
  --green-4: hsl(131, 80%, 68%);
  --green-5: hsl(131, 80%, 59%);
  --green-6: hsl(131, 80%, 50%);
  --green-7: hsl(131, 80%, 41%);
  --green-8: hsl(131, 80%, 32%);
  --green-9: hsl(131, 80%, 23%);
  --lime-0: hsl(85, 80%, 94%);
  --lime-1: hsl(85, 80%, 90%);
  --lime-2: hsl(85, 80%, 86%);
  --lime-3: hsl(85, 80%, 77%);
  --lime-4: hsl(85, 80%, 68%);
  --lime-5: hsl(85, 80%, 59%);
  --lime-6: hsl(85, 80%, 50%);
  --lime-7: hsl(85, 80%, 41%);
  --lime-8: hsl(85, 80%, 32%);
  --lime-9: hsl(85, 80%, 23%);
  --yellow-0: hsl(39, 80%, 94%);
  --yellow-1: hsl(39, 80%, 90%);
  --yellow-2: hsl(39, 80%, 86%);
  --yellow-3: hsl(39, 80%, 77%);
  --yellow-4: hsl(39, 80%, 68%);
  --yellow-5: hsl(39, 80%, 59%);
  --yellow-6: hsl(39, 80%, 50%);
  --yellow-7: hsl(39, 80%, 41%);
  --yellow-8: hsl(39, 80%, 32%);
  --yellow-9: hsl(39, 80%, 23%);
  --orange-0: hsl(24, 80%, 94%);
  --orange-1: hsl(24, 80%, 90%);
  --orange-2: hsl(24, 80%, 86%);
  --orange-3: hsl(24, 80%, 77%);
  --orange-4: hsl(24, 80%, 68%);
  --orange-5: hsl(24, 80%, 59%);
  --orange-6: hsl(24, 80%, 50%);
  --orange-7: hsl(24, 80%, 41%);
  --orange-8: hsl(24, 80%, 32%);
  --orange-9: hsl(24, 80%, 23%);
  --grey-a: hsl(0, 0%, 96%);
  --grey-0: hsl(0, 0%, 94%);
  --grey-1: hsl(0, 0%, 90%);
  --grey-2: hsl(0, 0%, 86%);
  --grey-3: hsl(0, 0%, 77%);
  --grey-4: hsl(0, 0%, 68%);
  --grey-5: hsl(0, 0%, 59%);
  --grey-6: hsl(0, 0%, 50%);
  --grey-7: hsl(0, 0%, 41%);
  --grey-8: hsl(0, 0%, 32%);
  --grey-9: hsl(0, 0%, 23%);
  --grey-10: hsl(0, 0%, 18%);
  --grey-11: hsl(0, 0%, 9%);
  --grey-12: hsl(0, 0%, 3%);
  /* ------------------------------------------ */
  /* Theme */
  /* default is light */
  --ghost-off-white: #f8f8ff; /* Ghost White */
  /* text color */
  /*--text-color-dark: #0c1b6a; /* use against shad 0-4 of each color */
  --text-color-dark: var(--grey-9); /* use against shad 0-4 of each color */
  --body-background: white;
  --color-primary: var(--primary-4);
  --color-primary-dim: var(--primary-1);
  --color-primary-accent: var(--primary-7);
  --color-secondary: var(--secondary-4);
  --text-color-primary: var(--grey-9);
  --text-color-secondary: white;
  --text-color-muted: var(--grey-6);
  --bg-primary: white;
  --bg-primary-alt: var(--grey-0);
  /* used for headers and as a background color from some links and the form's submit button */
  --primary: var(--primary-4);
  --border-color-primary: var(--grey-4);
  --border-color-muted: var(--grey-1);
  --dim: var(--grey-0);
  --bg-list-active: var(--grey-a);
  --bg-list-hover: var(--grey-1);
  --bg-summary-hover: var(--grey-1);
  --bg-summary-open: var(--grey-0);
  --border-nested-link: var(--grey-3);
  /* form */
  --bg-toggle-color: var(--grey-3);
  --bg-input-color: var(--grey-a);
  --success-color: var(--green-9);
  --bg-success-color: var(--green-2);
  --danger-color: var(--red-7);
  --bg-danger-color: var(--red-2);
  --info-color: var(--blue-7);
  --bg-info-color: var(--blue-2);
  /* ---------------------------------------------- */
  /* config variable */
  --fixed-sidebar-w: 25ch;
}

body.dark-mode {
  --text-color-primary: var(--grey-2);
  --text-color-secondary: black;
  --text-color-muted: var(--grey-5);
  --bg-primary: black;
  --bg-primary-alt: var(--grey-10);
  /* used for headers and as a background color from some links and the form's submit button */
  --primary: var(--primary-4);
  --color-primary: var(--primary-4);
  --border-color-primary: var(--grey-5);
  --border-color-muted: var(--grey-8);
  --dim: var(--grey-9);
  /* list */
  --bg-list-active: var(--grey-11);
  --bg-summary-hover: var(--grey-8);
  --bg-summary-open: var(--grey-9);
  --border-nested-link: var(--grey-8);
  /* form */
  --bg-toggle-color: var(--grey-6);
  --bg-input-color: var(--grey-11);
  --success-color: var(--green-2);
  --bg-success-color: var(--green-8);
  --danger-color: var(--red-2);
  --bg-danger-color: var(--red-7);
  --info-color: var(--blue-2);
  --bg-info-color: var(--blue-7);
  --disabled-color: var(--grey-5);
  --bg-disabled-color: var(--grey-10);
}

/* reset */
ul {
  margin: 0;
  padding: 0;
}

body, div, section, main, p {
  font-size: var(--fs-2);
  color: var(--text-color-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-fonts);
  color: var(--text-color-primary);
  margin: 0.67rem 0 0 0;
  padding: 0;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 0;
}

h1, h2, h3 {
  line-height: 1.5;
}

h4, h5, h6 {
  line-height: 1.75;
  margin-bottom: var(--fs-1);
}

h1 {
  font-size: var(--fs-7);
}

h2 {
  font-size: var(--fs-6);
}

h3 {
  font-size: var(--fs-5);
}

h4 {
  font-size: var(--fs-4);
}

h5 {
  font-size: var(--fs-3);
}

h6 {
  font-size: var(--fs-2);
}

hgroup h2, hgroup h3, hgroup h4 {
  padding-bottom: 0;
  margin-bottom: 0;
}
hgroup p {
  line-height: var(--base-line-height);
  margin-top: 0;
  color: var(--text-color-muted);
  line-height: 1.5;
}

body, div, span, p, button, a {
  font-family: var(--sans-serif-fonts);
}

p {
  line-height: var(--base-line-height);
  margin: 0.67em 0;
}

blockquote:before {
  position: absolute;
  margin-top: -0.3rem;
  margin-left: -0.7rem;
  content: "“";
  font-size: var(--fs-5);
}

/* font utilities */
.ft-sans-serif {
  font-family: var(--sans-serif-fonts);
}

.ft-serif {
  font-family: var(--serif-fonts);
}

.ft-mono {
  font-family: var(--monospace-fonts);
}

.ft-fantasy {
  font-family: var(--fantasy-fonts);
}

.ft-cursive {
  font-family: var(--cursive-fonts);
  font-size: 150%;
}

/* all css includes utilities */
/* all css includes utilities */
.accordion details summary {
  padding: 8px 10px;
}

form input[type=submit], button, .btn {
  background-color: var(--primary-8);
  color: var(--primary-1);
  padding: 8px 10px;
  font-size: 14px;
  border: 0px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover, .btn:hover {
  background-color: var(--primary-7);
  color: var(--primary-0);
}
button.btn-secondary, .btn.btn-secondary {
  background-color: var(--secondary-8);
  color: var(--secondary-1);
}
button.btn-secondary:hover, .btn.btn-secondary:hover {
  color: var(--secondary-0);
  background-color: var(--secondary-7);
}
button.btn-secondary-outline, .btn.btn-secondary-outline {
  background-color: var(--bg-primary);
  color: var(--secondary-4);
  border: 1px solid var(--secondary-4);
}
button.btn-secondary-outline:hover, .btn.btn-secondary-outline:hover {
  color: var(--secondary-5);
  border: 1px solid var(--secondary-6);
}
button.btn-danger, .btn.btn-danger {
  background-color: var(--red-8);
  color: var(--red-1);
}
button.btn-danger:hover, .btn.btn-danger:hover {
  color: var(--red-0);
  background-color: var(--red-7);
}
button.btn-danger-outline, .btn.btn-danger-outline {
  background-color: var(--bg-primary);
  border: 1px solid var(--red-4);
  color: var(--red-4);
}
button.btn-danger-outline:hover, .btn.btn-danger-outline:hover {
  color: var(--red-5);
  border: 1px solid var(--red-6);
}
button.btn-outline, .btn.btn-outline {
  background-color: var(--bg-primary);
  border: 1px solid var(--primary-5);
  color: var(--primary-5);
}
button.btn-outline:hover, .btn.btn-outline:hover {
  color: var(--primary-6);
  border: 1px solid var(--primary-5);
}
button.btn-small, .btn.btn-small {
  font-size: 12px;
  padding: 6px 8px;
}
button.btn-large, .btn.btn-large {
  font-size: 16px;
  padding: 12px 16px;
}
button.btn-extra, .btn.btn-extra {
  font-size: 20px;
  padding: 15px 30px;
}

a:link {
  color: var(--violet-8);
}
a:visited {
  color: var(--grape-8);
}

nav.pagination ul li a, nav.pagination ul li span, nav.breadcrumbs ul li a, nav.tab.tab-radio label, nav.tab ul li a, nav.sidemenu ul li a, nav.sidemenu details ul li, nav.sidemenu details summary {
  padding: 6px 10px;
  cursor: pointer;
}

nav.basic {
  display: flex;
  justify-content: space-between;
  align-items: space-between;
  width: 100%;
}
nav.basic ul {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}
nav.basic ul li {
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-primary);
  border-radius: 5px;
  list-style: none;
}
nav.basic ul li:hover {
  background-color: var(--dim);
}
nav.basic ul li.active {
  color: var(--text-color-primary);
  background-color: var(--bg-primary-alt);
}
nav.basic ul li a {
  text-decoration: none;
  color: var(--text-color-primary);
}
nav.basic ul li + li {
  margin-left: 0.5rem;
}
nav.basic details {
  cursor: pointer;
}
nav.basic details[open] summary::after {
  content: " ⋀";
}
nav.basic details:hover {
  background-color: var(--bg-primary-atl);
}
nav.basic details summary {
  list-style: none;
  color: var(--text-color-primary);
}
nav.basic details summary::after {
  content: " ⋁";
}
nav.basic details ul {
  position: absolute;
  background: white;
  display: block;
  margin-left: -1rem;
  margin-top: 1.2rem;
  border: 1px solid var(--bg-primary-alt);
  background-color: var(--bg-primary);
}
nav.basic details ul li {
  margin-left: 0;
}

/* side menu */
nav.sidemenu {
  min-width: 180px;
  /* menu group name */
}
nav.sidemenu p {
  font-family: var(--serif-fonts);
  color: var(--text-color-muted);
  letter-spacing: calc(var(--fs-2) * 0.05);
  padding: 6px 0px;
  margin: 0 0 -0.25rem 0;
}
nav.sidemenu details[open] summary::after {
  content: "–";
}
nav.sidemenu details summary {
  list-style: none;
}
nav.sidemenu details summary::after {
  content: "+";
  font-family: var(--monospace-fonts);
  float: right;
  color: var(--text-color-muted);
  font-weight: bold;
  margin-top: -0.15rem;
}
nav.sidemenu details summary:hover {
  background-color: var(--bg-summary-hover);
}
nav.sidemenu details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: calc(10px + 0.5rem);
}
nav.sidemenu details ul li {
  border-left: 1px solid var(--border-nested-link);
  align-items: baseline;
  white-space: nowrap;
}
nav.sidemenu details ul li a {
  color: var(--text-color-primary);
  text-decoration: none;
  padding: 0;
}
nav.sidemenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.sidemenu ul li:hover {
  background-color: var(--bg-summary-hover);
}
nav.sidemenu ul li.active {
  background-color: var(--bg-list-active);
  font-weight: bold;
}
nav.sidemenu ul li a {
  color: var(--text-color-primary);
  text-decoration: none;
  display: block;
}
nav.sidemenu ul li a:visited {
  color: var(--text-color-primary);
}

/* tab */
nav.tab ul {
  display: flex;
  margin: 0;
}
nav.tab ul li {
  list-style: none;
}
nav.tab ul li.active {
  border-bottom: 0;
  border-bottom: 2px solid var(--primary-4);
}
nav.tab ul li a {
  display: block;
}
nav.tab section {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--text-color-primary);
}
nav.tab.tab-radio {
  display: flex;
  flex-wrap: wrap;
  /* input x label */
}
nav.tab.tab-radio input[type=radio] {
  display: none;
}
nav.tab.tab-radio input[type=radio]:checked + label {
  border-bottom: 2px solid var(--primary-4);
}
nav.tab.tab-radio input[type=radio]:checked + label + section {
  display: block;
}
nav.tab.tab-radio label:first-of-type:after {
  width: 10px;
  display: block;
  border: 1px solid red;
}
nav.tab.tab-radio label {
  display: block;
}
nav.tab.tab-radio section {
  border-top: 1px solid var(--text-color-primary);
  display: none;
  padding: 8px 10px;
  flex-grow: 1;
  width: 100%;
  order: 99;
}

/* breadcrumbs */
nav.breadcrumbs ul {
  display: flex;
}
nav.breadcrumbs ul li {
  display: flex;
  align-items: baseline;
  list-style: none;
}
nav.breadcrumbs ul li:not(:last-child):after {
  content: " / ";
}
nav.breadcrumbs ul li:last-child a {
  color: var(--text-color-muted);
  cursor: default;
}
nav.breadcrumbs ul li:last-child a:hover {
  text-decoration: none;
  pointer-events: none;
}
nav.breadcrumbs ul li a {
  color: var(--primary-4);
  display: block;
}
nav.breadcrumbs ul li a:hover {
  text-decoration: underline;
}

nav.pagination ul {
  display: flex;
}
nav.pagination ul li {
  display: flex;
  align-items: baseline;
  list-style: none;
  margin-right: 0.2rem;
}
nav.pagination ul li.disabled a {
  color: var(--text-color-muted);
  cursor: default;
  pointer-events: none;
}
nav.pagination ul li.active a {
  background-color: var(--primary-6);
  color: var(--primary-1);
}
nav.pagination ul li {
  /* for ... */
}
nav.pagination ul li span {
  display: block;
}
nav.pagination ul li a {
  text-decoration: none;
  border: 1px solid var(--dim);
  border-radius: 5px;
  color: var(--primary-4);
  display: block;
}
nav.pagination ul li a:hover {
  background-color: var(--primary-5);
  color: var(--primary-0);
}

/* all css includes utilities */
input:not([type=range]), select, textarea {
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  color: var(--text-primary-color);
  background-color: var(--bg-input-color);
}
input:not([type=range])[aria-invalid=false], select[aria-invalid=false], textarea[aria-invalid=false] {
  border: 1px solid var(--success-color);
}
input:not([type=range])[aria-invalid=false] + span, input:not([type=range])[aria-invalid=false] + small, select[aria-invalid=false] + span, select[aria-invalid=false] + small, textarea[aria-invalid=false] + span, textarea[aria-invalid=false] + small {
  color: var(--success-color);
}
input:not([type=range])[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] {
  border: 1px solid var(--danger-color);
}
input:not([type=range])[aria-invalid=true] + span, input:not([type=range])[aria-invalid=true] + small, select[aria-invalid=true] + span, select[aria-invalid=true] + small, textarea[aria-invalid=true] + span, textarea[aria-invalid=true] + small {
  color: var(--danger-color);
}
input:not([type=range]):placeholder, select:placeholder, textarea:placeholder {
  color: var(--text-color-muted);
}

form {
  /* control wrapper */
}
form p {
  margin: 0 0 0.5rem 0;
  display: flex;
  flex-direction: column;
}
form label {
  display: block;
  line-height: 1.75;
  font-family: var(--serif-fonts);
  font-size: 0.8rem;
}
form label:not(:first-of-type) {
  margin-top: 0.8rem;
}
form label:has([type=checkbox]), form label:has([type=radio]) {
  margin-top: 0.25rem;
}
form label {
  /* margin-top of label when its under a status message */
}
form label:has(small) + label {
  margin-top: 0.3rem;
}
form label small {
  font-family: var(--sans-serif-fonts);
  line-height: 0.5;
}
form label select, form label input:not([type=checkbox]):not([type=radio]) {
  width: calc(100% - 1.4rem);
}
form label.switch {
  display: flex;
  align-items: center;
  color: var(--text-color-primary);
}
form label.switch [type=checkbox] {
  appearance: none;
  background-color: var(--bg-toggle-color);
  height: 1.25rem;
  width: 2.25rem;
  border-radius: 1.25rem;
  margin-right: 0.5rem;
}
form label.switch [type=checkbox]:not([aria-invalid]) {
  border-color: var(--grey-4);
}
form label.switch [type=checkbox]:before {
  display: block;
  aspect-ratio: 1;
  margin-left: -0.4rem;
  margin-top: -0.13rem;
  height: 150%;
  border-radius: 50%;
  background-color: var(--bg-primary);
  content: "";
  transition: margin 0.1s ease-in-out;
}
form label.switch [type=checkbox]:checked {
  background-color: var(--bg-success-color);
  border-color: var(--success-color);
  background-image: none;
}
form label.switch [type=checkbox]:checked::before {
  margin-inline-start: 0.6rem;
}
form label.switch [type=checkbox][disabled] {
  background-color: var(--dim);
  border-color: var(--dim);
}
form div {
  display: flex;
  align-items: baseline;
}
form fieldset {
  border: 1px solid var(--dim);
  border-radius: 5px;
}
form fieldset legend {
  font-weight: 700;
  font-family: var(--serif-fonts);
  margin-left: -0.3rem;
}
form {
  /* bottom most section of the form */
}
form footer.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
form textarea {
  font-family: var(--sans-serif-fonts);
}
form input[type=number], form input[type=tel] {
  font-family: var(--monospace-fonts);
}
/* all css includes utilities */
table {
  border: 0;
  border-collapse: collapse;
  margin: 0.5rem 0;
}
table.fixed-header {
  border-collapse: separate;
}
table.fixed-header thead {
  outline: 1px solid var(--text-color-primary);
  position: sticky;
  background-color: var(--bg-primary);
  top: 1px;
}
table.fixed-first-col td:first-of-type, table.fixed-first-col th:first-of-type {
  position: sticky;
  left: 0;
  background-color: var(--bg-primary-alt);
  border-right: 2px solid var(--text-color-muted);
}
table.fixed-first-col {
  /* make the table one line row */
}
table.fixed-first-col td, table.fixed-first-col th {
  white-space: nowrap;
}
table thead {
  border-bottom: 2px solid var(--border-color-primary);
}
table thead th {
  font-family: var(--serif-fonts);
  color: var(--text-color-primary);
  padding: 6px 10px;
  word-break: auto-phrase;
}
table tbody tr {
  border-bottom: 1px solid var(--border-color-muted);
}
table tbody td {
  padding: 4px 8px;
  word-break: auto-phrase;
}
table tfoot {
  border-top: 2px solid var(--border-color-primary);
}
table.striped tbody tr:nth-child(odd) {
  background-color: var(--dim);
}

/* all css includes utilities */
.accordion details {
  cursor: pointer;
}
.accordion details:not(:last-child) {
  border-bottom: 1px solid var(--dim);
}
.accordion details[open] summary {
  border-color: var(--bg-summary-open);
}
.accordion details[open] summary::after {
  content: "–";
}
.accordion details summary {
  list-style: none;
}
.accordion details summary::after {
  content: "+";
  font-family: var(--monospace-fonts);
  float: right;
  color: var(--text-color-muted);
  font-weight: bold;
  margin-top: -0.15rem;
}
.accordion details summary + * {
  margin: 0 0 10px 10px;
}
.accordion details summary + ul {
  margin-left: 1.3rem;
}
.accordion details section ul {
  margin: 0 10px;
}
.accordion details section h1, .accordion details section h2, .accordion details section h3, .accordion details section h4, .accordion details section h5, .accordion details section h6 {
  margin: 0;
}

/* all css includes utilities */
.flex-stretch {
  display: flex;
  flex-basis: auto;
}
.flex-stretch.gap {
  gap: var(--fs-1);
}
.flex-stretch > * {
  flex-grow: 1;
  align-self: flex-end;
}

.flex-sidebar {
  display: flex;
  width: 100%;
}
.flex-sidebar.gap {
  gap: var(--fs-1);
}
.flex-sidebar > *:first-child {
  width: var(--fixed-sidebar-w);
  flex-shrink: 0;
}
.flex-sidebar > *:last-child {
  flex-grow: 1;
}
.flex-sidebar.fixed > *:first-child {
  position: fixed;
  top: 0;
}
.flex-sidebar.fixed > *:first-child.full-h {
  height: 100vh;
}
.flex-sidebar.fixed > *:last-child {
  margin-left: calc(var(--fixed-sidebar-w) + var(--fs-1));
  width: calc(100% - var(--fixed-sidebar-w));
}
.flex-sidebar.column {
  flex-direction: column;
}
.flex-sidebar.column > *:first-child {
  width: auto;
  height: var(--fs-9);
  flex-grow: 1;
}
.flex-sidebar.column > *:last-child {
  flex-grow: 1;
}

.flex-sidebar-right {
  display: flex;
  width: 100%;
}
.flex-sidebar-right.gap {
  gap: var(--fs-1);
}
.flex-sidebar-right > *:first-child {
  flex-grow: 1;
}
.flex-sidebar-right > *:last-child {
  width: var(--fixed-sidebar-w);
  flex-shrink: 0;
}

.flex-golden {
  display: flex;
  width: 100%;
}
.flex-golden.gap {
  gap: var(--fs-1);
}
.flex-golden > *:first-child {
  width: 33%;
  flex-shrink: 0;
}
.flex-golden > *:last-child {
  flex-grow: 1;
}

.flex-golden-right {
  display: flex;
  width: 100%;
}
.flex-golden-right.gap {
  gap: var(--fs-1);
}
.flex-golden-right > *:first-child {
  flex-grow: 1;
}
.flex-golden-right > *:last-child {
  width: 33%;
  flex-shrink: 0;
}

/* layout utilities */
.flex-btw {
  display: flex;
  justify-content: space-between;
  align-items: space-between;
}

.full-w {
  width: 100%;
}

.flex {
  display: flex;
  align-items: flex-end;
  align-content: flex-end;
}
.flex * + * {
  margin-left: 0.3rem;
}

.overflow-auto {
  overflow: auto;
  width: 100%;
}

/* all css includes utilities */
article.card {
  padding-left: 1rem;
}

/* all css includes utilities */
span.badge {
  font-size: var(--fs-1);
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--bg-primary-alt);
  cursor: default;
  white-space: nowrap;
}
span.badge.success {
  color: var(--success-color);
  background-color: var(--bg-success-color);
}
span.badge.danger {
  color: var(--danger-color);
  background-color: var(--bg-danger-color);
}
span.badge.info {
  color: var(--info-color);
  background-color: var(--bg-info-color);
}
span.badge.disabled {
  color: var(--disabled-color);
  background-color: var(--bg-disabled-color);
}

.bg-primary-0 {
  background-color: var(--primary-0);
}

.bg-primary-1 {
  background-color: var(--primary-1);
}

.bg-primary-2 {
  background-color: var(--primary-2);
}

.bg-primary-3 {
  background-color: var(--primary-3);
}

.bg-primary-4 {
  background-color: var(--primary-4);
}

.bg-primary-5 {
  background-color: var(--primary-5);
}

.bg-primary-6 {
  background-color: var(--primary-6);
}

.bg-primary-7 {
  background-color: var(--primary-7);
}

.bg-primary-8 {
  background-color: var(--primary-8);
}

.bg-primary-9 {
  background-color: var(--primary-9);
}

.bg-secondary-0 {
  background-color: var(--secondary-0);
}

.bg-secondary-1 {
  background-color: var(--secondary-1);
}

.bg-secondary-2 {
  background-color: var(--secondary-2);
}

.bg-secondary-3 {
  background-color: var(--secondary-3);
}

.bg-secondary-4 {
  background-color: var(--secondary-4);
}

.bg-secondary-5 {
  background-color: var(--secondary-5);
}

.bg-secondary-6 {
  background-color: var(--secondary-6);
}

.bg-secondary-7 {
  background-color: var(--secondary-7);
}

.bg-secondary-8 {
  background-color: var(--secondary-8);
}

.bg-secondary-9 {
  background-color: var(--secondary-9);
}

.bg-red-0 {
  background-color: var(--red-0);
}

.bg-red-1 {
  background-color: var(--red-1);
}

.bg-red-2 {
  background-color: var(--red-2);
}

.bg-red-3 {
  background-color: var(--red-3);
}

.bg-red-4 {
  background-color: var(--red-4);
}

.bg-red-5 {
  background-color: var(--red-5);
}

.bg-red-6 {
  background-color: var(--red-6);
}

.bg-red-7 {
  background-color: var(--red-7);
}

.bg-red-8 {
  background-color: var(--red-8);
}

.bg-red-9 {
  background-color: var(--red-9);
}

.bg-pink-0 {
  background-color: var(--pink-0);
}

.bg-pink-1 {
  background-color: var(--pink-1);
}

.bg-pink-2 {
  background-color: var(--pink-2);
}

.bg-pink-3 {
  background-color: var(--pink-3);
}

.bg-pink-4 {
  background-color: var(--pink-4);
}

.bg-pink-5 {
  background-color: var(--pink-5);
}

.bg-pink-6 {
  background-color: var(--pink-6);
}

.bg-pink-7 {
  background-color: var(--pink-7);
}

.bg-pink-8 {
  background-color: var(--pink-8);
}

.bg-pink-9 {
  background-color: var(--pink-9);
}

.bg-grape-0 {
  background-color: var(--grape-0);
}

.bg-grape-1 {
  background-color: var(--grape-1);
}

.bg-grape-2 {
  background-color: var(--grape-2);
}

.bg-grape-3 {
  background-color: var(--grape-3);
}

.bg-grape-4 {
  background-color: var(--grape-4);
}

.bg-grape-5 {
  background-color: var(--grape-5);
}

.bg-grape-6 {
  background-color: var(--grape-6);
}

.bg-grape-7 {
  background-color: var(--grape-7);
}

.bg-grape-8 {
  background-color: var(--grape-8);
}

.bg-grape-9 {
  background-color: var(--grape-9);
}

.bg-violet-0 {
  background-color: var(--violet-0);
}

.bg-violet-1 {
  background-color: var(--violet-1);
}

.bg-violet-2 {
  background-color: var(--violet-2);
}

.bg-violet-3 {
  background-color: var(--violet-3);
}

.bg-violet-4 {
  background-color: var(--violet-4);
}

.bg-violet-5 {
  background-color: var(--violet-5);
}

.bg-violet-6 {
  background-color: var(--violet-6);
}

.bg-violet-7 {
  background-color: var(--violet-7);
}

.bg-violet-8 {
  background-color: var(--violet-8);
}

.bg-violet-9 {
  background-color: var(--violet-9);
}

.bg-indigo-0 {
  background-color: var(--indigo-0);
}

.bg-indigo-1 {
  background-color: var(--indigo-1);
}

.bg-indigo-2 {
  background-color: var(--indigo-2);
}

.bg-indigo-3 {
  background-color: var(--indigo-3);
}

.bg-indigo-4 {
  background-color: var(--indigo-4);
}

.bg-indigo-5 {
  background-color: var(--indigo-5);
}

.bg-indigo-6 {
  background-color: var(--indigo-6);
}

.bg-indigo-7 {
  background-color: var(--indigo-7);
}

.bg-indigo-8 {
  background-color: var(--indigo-8);
}

.bg-indigo-9 {
  background-color: var(--indigo-9);
}

.bg-blue-0 {
  background-color: var(--blue-0);
}

.bg-blue-1 {
  background-color: var(--blue-1);
}

.bg-blue-2 {
  background-color: var(--blue-2);
}

.bg-blue-3 {
  background-color: var(--blue-3);
}

.bg-blue-4 {
  background-color: var(--blue-4);
}

.bg-blue-5 {
  background-color: var(--blue-5);
}

.bg-blue-6 {
  background-color: var(--blue-6);
}

.bg-blue-7 {
  background-color: var(--blue-7);
}

.bg-blue-8 {
  background-color: var(--blue-8);
}

.bg-blue-9 {
  background-color: var(--blue-9);
}

.bg-cyan-0 {
  background-color: var(--cyan-0);
}

.bg-cyan-1 {
  background-color: var(--cyan-1);
}

.bg-cyan-2 {
  background-color: var(--cyan-2);
}

.bg-cyan-3 {
  background-color: var(--cyan-3);
}

.bg-cyan-4 {
  background-color: var(--cyan-4);
}

.bg-cyan-5 {
  background-color: var(--cyan-5);
}

.bg-cyan-6 {
  background-color: var(--cyan-6);
}

.bg-cyan-7 {
  background-color: var(--cyan-7);
}

.bg-cyan-8 {
  background-color: var(--cyan-8);
}

.bg-cyan-9 {
  background-color: var(--cyan-9);
}

.bg-teal-0 {
  background-color: var(--teal-0);
}

.bg-teal-1 {
  background-color: var(--teal-1);
}

.bg-teal-2 {
  background-color: var(--teal-2);
}

.bg-teal-3 {
  background-color: var(--teal-3);
}

.bg-teal-4 {
  background-color: var(--teal-4);
}

.bg-teal-5 {
  background-color: var(--teal-5);
}

.bg-teal-6 {
  background-color: var(--teal-6);
}

.bg-teal-7 {
  background-color: var(--teal-7);
}

.bg-teal-8 {
  background-color: var(--teal-8);
}

.bg-teal-9 {
  background-color: var(--teal-9);
}

.bg-green-0 {
  background-color: var(--green-0);
}

.bg-green-1 {
  background-color: var(--green-1);
}

.bg-green-2 {
  background-color: var(--green-2);
}

.bg-green-3 {
  background-color: var(--green-3);
}

.bg-green-4 {
  background-color: var(--green-4);
}

.bg-green-5 {
  background-color: var(--green-5);
}

.bg-green-6 {
  background-color: var(--green-6);
}

.bg-green-7 {
  background-color: var(--green-7);
}

.bg-green-8 {
  background-color: var(--green-8);
}

.bg-green-9 {
  background-color: var(--green-9);
}

.bg-lime-0 {
  background-color: var(--lime-0);
}

.bg-lime-1 {
  background-color: var(--lime-1);
}

.bg-lime-2 {
  background-color: var(--lime-2);
}

.bg-lime-3 {
  background-color: var(--lime-3);
}

.bg-lime-4 {
  background-color: var(--lime-4);
}

.bg-lime-5 {
  background-color: var(--lime-5);
}

.bg-lime-6 {
  background-color: var(--lime-6);
}

.bg-lime-7 {
  background-color: var(--lime-7);
}

.bg-lime-8 {
  background-color: var(--lime-8);
}

.bg-lime-9 {
  background-color: var(--lime-9);
}

.bg-yellow-0 {
  background-color: var(--yellow-0);
}

.bg-yellow-1 {
  background-color: var(--yellow-1);
}

.bg-yellow-2 {
  background-color: var(--yellow-2);
}

.bg-yellow-3 {
  background-color: var(--yellow-3);
}

.bg-yellow-4 {
  background-color: var(--yellow-4);
}

.bg-yellow-5 {
  background-color: var(--yellow-5);
}

.bg-yellow-6 {
  background-color: var(--yellow-6);
}

.bg-yellow-7 {
  background-color: var(--yellow-7);
}

.bg-yellow-8 {
  background-color: var(--yellow-8);
}

.bg-yellow-9 {
  background-color: var(--yellow-9);
}

.bg-orange-0 {
  background-color: var(--orange-0);
}

.bg-orange-1 {
  background-color: var(--orange-1);
}

.bg-orange-2 {
  background-color: var(--orange-2);
}

.bg-orange-3 {
  background-color: var(--orange-3);
}

.bg-orange-4 {
  background-color: var(--orange-4);
}

.bg-orange-5 {
  background-color: var(--orange-5);
}

.bg-orange-6 {
  background-color: var(--orange-6);
}

.bg-orange-7 {
  background-color: var(--orange-7);
}

.bg-orange-8 {
  background-color: var(--orange-8);
}

.bg-orange-9 {
  background-color: var(--orange-9);
}

.bg-grey-0 {
  background-color: var(--grey-0);
}

.bg-grey-1 {
  background-color: var(--grey-1);
}

.bg-grey-2 {
  background-color: var(--grey-2);
}

.bg-grey-3 {
  background-color: var(--grey-3);
}

.bg-grey-4 {
  background-color: var(--grey-4);
}

.bg-grey-5 {
  background-color: var(--grey-5);
}

.bg-grey-6 {
  background-color: var(--grey-6);
}

.bg-grey-7 {
  background-color: var(--grey-7);
}

.bg-grey-8 {
  background-color: var(--grey-8);
}

.bg-grey-9 {
  background-color: var(--grey-9);
}

/*# sourceMappingURL=farga.all.css.map */