:root {
  interpolate-size: allow-keywords;
}

html {
  /* scrollbar-width: thin; */

  /* scroll-behavior: smooth; */

  /* min-height: -webkit-fill-available; */
  min-height: 100dvh;
  display: grid;
}

/* css reset */
/* check if reset already handled by tailwind */
/* html {
  font-size: 100%;
}

* {
  font: inherit;
}

textarea,
input {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
} */

body {
  display: flex;
  flex-direction: column;
}

.background {
  opacity: 0.1;

  background: aliceblue;
  /* background-image: url("/assets/grid.png"); */
  background-image: url("https://moveit.com.ph/wp-content/uploads/2024/03/Copy-of-MI_WEB_MAIN_725x445_withBleed_725x545_A.png");

  background-size: cover;
  background-position: bottom;

  /* background: linear-gradient(
      180deg,
      transparent,
      hsla(0, 0%, 95%, 0.29) 47.39%,
      #fff
    ),
    linear-gradient(
      90deg,
      #f9ddf1 0.07%,
      #e5e1ff 16.73%,
      #daedff 34.48%,
      #e2f4e3 49.98%,
      #ebf5d8 66.12%,
      #faf2da 81.95%,
      #fbe5d8 99.9%
    ); */

  position: fixed;
  inset-inline: 0;
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  min-height: 100lvh;
  z-index: -1;
}

.m-auto {
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.formgrid {
  display: grid;
  align-items: baseline;
  overflow-wrap: break-word;
}

.formgrid > *:nth-child(odd) {
  font-size: 0.8rem;
}

@media (width > 60ch) {
  .formgrid {
    grid-template-columns: repeat(auto-fill, 20ch minmax(0, 40ch));
  }

  .formgrid > *:nth-child(odd) {
    padding-inline: 10px;
    text-align: end;
    border-inline-end: 1px dashed #888;
    margin-inline-end: 10px;
  }
}

textarea,
select,
input {
  field-sizing: content;
}

.formgrid3 > * {
  display: grid;
}

.formgrid3 > * > * {
  white-space: pre-wrap;
}

.formgrid3 > * > *:first-child {
  word-break: break-word;
}

.formgrid3 > * > *:not(:first-child) {
  word-break: break-all;
}

.formgrid3 > * > * {
  width: auto;
}

.formgrid3 > * > *:first-child {
  font-size: 0.8rem;
  /* font-weight: bold; */
}

@media (width > 640px) {
  .formgrid3 {
    display: grid;
    align-content: start;
    /* grid-template-columns: repeat(auto-fill, 8rem 24rem); */
    /* grid-template-columns: repeat(auto-fill, 8rem minmax(0, max(0px, 24rem))); */
    /* grid-template-columns: repeat(auto-fill, minmax(0, max(0px, 24rem))); */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  .formgrid3 > * {
    display: grid;
    grid-template-columns: 8rem 1fr;
    /* grid-template-columns: subgrid; */
    /* grid-column: span 2; */
  }

  .formgrid3 > .wide {
    grid-column: 1 / -1;
  }

  .equal-rows {
    grid-auto-rows: 1fr;
  }

  .formgrid3 > * {
    align-items: baseline;
  }

  .formgrid3 > * > *:first-child {
    /* justify-items: end; */
    padding-inline: 10px;
    text-align: end;
    border-right: 1px dashed #888;
    margin-inline-end: 10px;
  }
}

form {
  display: contents;
}

.border {
  border-color: #888;
}

.hiddenscrollbars::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hiddenscrollbars {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.error {
  color: red;
}

@keyframes fadeup {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}

.fadeup {
  animation: fadeup 300ms;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
}

.fadein {
  animation: fadein 300ms;
}

.nowrap {
  text-wrap: nowrap;
  /* white-space: nowrap; */
}

table th,
table td {
  vertical-align: baseline;
  text-align: left;
  /* word-break: break-all; */
  /* overflow-wrap: anywhere; */
  /* hyphens: auto; */
  /* overflow-wrap: break-word; */
  /* word-wrap: break-word; */
  /* word-wrap is none standard
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text
  */

  /* word-break: break-word; */
  /* word-break: break-word; is deprecated
  https://stackoverflow.com/questions/17259916/difference-between-overflow-wrap-and-word-break
  https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word */
}

table {
  counter-reset: rowNumber;
}

table tr > td:first-child {
  counter-increment: rowNumber;
  text-wrap: nowrap;
}

table tr td:first-child::before {
  content: counter(rowNumber) ". ";
}

table {
  border-spacing: 0;
  border: 1px solid #ccc;
  /* margin: auto; */
}

table th {
  /* font-size: 0.7rem; */
  /* color: #888; */
  /* text-transform: uppercase; */
}

table th,
table td {
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
}

@media (width < 640px) {
  table {
    display: block;
    overflow: auto;
    white-space: nowrap;
    width: 0px;
    min-width: 100%;
    max-height: 60vh;
  }

  table th {
    /* position: sticky; */
    /* inset-block-start: 0; */
    /* background: #efefef; */
  }
}

input,
textarea,
select {
  border: 1px solid black;
  padding-inline: 1rem;
  padding-block: 0.4rem;
  min-width: 0px;
}

dialog {
  padding: 20px;
  border: 1px solid black;
}

label {
  text-wrap: nowrap;
  /* margin-inline: 10px; */
  /* white-space: nowrap; */
  min-width: fit-content;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1em;
  /* border-bottom: 1px solid #333; */
}

pre,
.pre {
  /* background-color: #eee; */
  /* border: 1px solid black; */
  white-space: pre-wrap;
  word-break: break-all;

  /* max-height: 600px; */
  /* overflow-y: scroll; */
  scrollbar-width: thin;

  /* font-size: xx-small; */
  text-align: start;
  hyphens: auto;
}

.grid-cols {
  display: grid;
  grid-auto-columns: minmax(0, auto);
  grid-auto-flow: column;

  align-items: start;
}

.fade {
  opacity: 0.5;
}

summary {
  cursor: pointer;
  padding-block-start: 20px;
}

details > summary {
  list-style: none;
}

/* Latest Chrome, Edge, Firefox */
details > summary::marker {
  display: none;
}

.flexgroup {
  display: inline flex;
  flex-wrap: wrap;
}

.flexgroup > * {
  flex: 1;
  min-width: fit-content;
}