/* :root { */
/* --primary: #d81b60; */
/* --primary-hover: #e91e63; */
/* --primary-focus: rgba(216, 27, 96, 0.25); */
/* --primary-inverse: #fff; */
/* } */
/* [data-theme="dark"] { */
/*   --color: #ccc; */
/*   --background-color: #0f292f; */
/*   --primary: #14a098; */
/*   --h1-color: #cb2d6f; */
/*   --warning-color: #cb2d6f; */
/*   --primary-hover: #0f292f; */
/*   --primary-focus: rgba(216, 27, 96, 0.25); */
/*   --primary-inverse: #fff; */
/*   --nav-link-spacing-vertical: 0.25rem; */
/*   --form-element-spacing-vertical: 0.3rem; */
/*   --form-element-spacing-horizontal: 0.5rem; */
/*   --spacing: 0.75rem; */
/*   --muted-color: #501f3a; */
/*   --muted-border-color: #501f3a; */
/* } */

:root[data-theme="dark"] {
  --pico-font-size: 14px;
  /* --pico-font-size: 100%; */
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-color: #eee;
    --pico-h1-color: #0081ce;
  }
}
[data-theme="dark"] {
  --pico-color: #eee;
  --pico-background-color: #3a4750;
  /* --pico-contrast-background: #47a417; */
  /* --pico-contrast-inverse: #eee; */
  /* --primary: #0081ce; */
  --pico-h1-color: #0081ce;
  /*   --warning-color: #cb2d6f; */
  /*   --primary-hover: #0f292f; */
  /*   --primary-focus: rgba(216, 27, 96, 0.25); */
  /*   --primary-inverse: #fff; */
  /*   --nav-link-spacing-vertical: 0.25rem; */
  /*   --form-element-spacing-vertical: 0.3rem; */
  /*   --form-element-spacing-horizontal: 0.5rem; */
  /*   --spacing: 0.75rem; */
  /*   --muted-color: #393e46; */
  /*   --muted-border-color: #393e46; */
}
body {
  background-color: #222831;
  height: 100vh;
}

img {
  width: 100%;
  display: block;
}
.border {
  border: var(--border-width) solid var(--table-border-color);
}
caption {
  border: var(--border-width) solid var(--table-border-color);
  /* padding: 0.5rem; */
  color: var(--h1-color);
  margin-bottom: 1rem;
}
.border-bottom {
  border-bottom: var(--border-width) solid var(--table-border-color);
}
.p-1 {
  padding: 0.25rem;
}
/* td:first-child { */
/* width: 70%; */
/* } */
td:last-child {
  text-align: right;
}
/**/
/* td:last-child { */
/* width: auto; */
/* float: right; */
/* } */
nav [role="button"] {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: center;
}
/* nav ul { */
/*   display: flex; */
/*   gap: 0.5rem; */
/*   align-items: baseline; */
/*   justify-content: space-evenly; */
/* } */

/* nav, */
/* nav > * { */
/* border: 1px solid white; */
/* } */

h1 {
  margin: 0;
  font-size: 1.1rem;
}
h6 {
  margin: 0;
}
.material-symbols-outlined {
  font-size: 1rem;
}
.warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}
.logo {
  max-width: 90px;
}
.biglogo {
  max-width: 200px;
}
.icon {
  cursor: pointer;
  padding: 0.4rem 0.5rem 0.3rem 0.5rem;
}

.border,
.border > * {
  /* border: 1px solid white; */
}
.pull-right {
  display: flex;
  justify-content: flex-end !important;
}

.button-row {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-left: auto;
  width: fit-content;
}

.button-row a,
.button-row button {
  width: auto;
}

.gap-1 {
  gap: 1rem;
}
.login_form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login_form form {
  max-width: 70%;
}
.login_form h3 {
  text-align: center;
  padding-top: 0.5rem;
}
.center {
  text-align: center;
}
.dashboard_footer,
.modal_footer {
  display: flex;
  justify-content: space-evenly;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
h4 {
  margin: 0 !important;
  text-align: center;
}
.dropzone {
  border: 2px dashed;
  border-color: #616170;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  /* margin: 1rem; */
  min-height: 150px;
  border-radius: 10px;
  cursor: pointer;
}
.dropzone p {
  text-align: center;
  margin: 0 !important;
  font-size: 1.2rem;
}
.dropzone span {
  font-size: 3rem;
  color: var(--pico-color-blue-500);
}
.mb-1 {
  margin-bottom: 1rem;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.pt-1 {
  padding-top: 1rem;
}
.alert {
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.alert p {
  margin: 0;
  color: #fff;
}
.alert--success p {
  color: #000;
}
.field-warning {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
}
.hidden {
  display: none;
}
.visible {
  display: block;
}
.form-narrow {
  max-width: 480px;
  margin: 0 auto;
}

.publish-flash {
  border-left: 4px solid;
  margin-bottom: 2rem;
}
.publish-flash h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.publish-flash--success {
  border-color: var(--pico-color-green-500);
}
.publish-flash--success h4 {
  color: var(--pico-color-green-400);
}
.publish-flash--error {
  border-color: var(--pico-color-red-500);
}
.publish-flash--error h4 {
  color: var(--pico-color-red-400);
}