* { margin: 0; padding: 0; }

input, textarea, select, button { font: inherit; letter-spacing: inherit; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { display: none; }

:root {
  --color-button: #373650;
  --color-cooldown: rgba(50, 205, 50, 0.3);
  --color-darkred: darkred;
  --color-disabled-button: lightgray;
  --color-done: rgba(30, 144, 255, 0.3);
  --color-due: #F9F9F9;
  --color-gray1: #BFBFBF;
  --color-late: rgba(255, 165, 0, 0.3);
  --color-light-gray: #666666;
  --color-lighter-gray: #F9F9F9;
  --color-overdue: rgba(255, 0, 0, 0.2);
  --color-pink: pink;
  --color-red: #FF383C;
  --color-white: #F9F9F9;
  --color-yellow: #C9A84A;
  --font-size-lg: 1.2rem;
  --font-size-sm: 0.7rem;
  --font-size-xs: 0.6rem;
  --rem-lg: 1rem;
  --rem-md: 0.5rem;
  --rem-sm: 0.25rem;
  --rem-xs: 0.1rem;
}

.small-number-field { width: 3ch; }
@supports (field-sizing: content) {
  .small-number-field { field-sizing: content; min-width: 3ch; width: auto; }
}

.align-items-center { align-items: center; }
.align-items-flex-end { align-items: flex-end; }
.align-self-center { align-self: center; }
.align-self-flex-start { align-self: flex-start; }
.appearance-none { appearance: none; }
.background-button { background: var(--color-button); }
.background-cooldown { background: var(--color-cooldown); }
.background-disabled-button { background: var(--color-disabled-button); }
.background-done { background: var(--color-done); }
.background-due { background: var(--color-due); }
.background-late { background: var(--color-late); }
.background-lighter-gray { background: var(--color-lighter-gray); }
.background-lightgray { background: lightgray; }
.background-overdue { background: var(--color-overdue); }
.background-red { background: var(--color-red); }
.border-1px-solid-black { border: 1px solid black; }
.border-1px-solid-gray1 { border: 1px solid var(--color-gray1); }
.border-1px-solid-red { border: 1px solid var(--color-red); }
.border-bottom-1px-solid-light-gray { border-bottom: 1px solid var(--color-light-gray); }
.border-bottom-2px-solid-black { border-bottom: 2px solid black; }
.border-left-none { border-left: none; }
.border-none { border: none; }
.border-radius-0px-4px-4px-0px { border-radius: 0px 4px 4px 0px; }
.border-radius-4px { border-radius: 4px; }
.border-radius-4px-0px-0px-4px { border-radius: 4px 0px 0px 4px; }
.bottom-100pct { bottom: 100%; }
.box-sizing-border-box { box-sizing: border-box; }
.color-black { color: black; }
.color-darkred { color: darkred; }
.color-gray1 { color: var(--color-gray1); }
.color-light-gray { color: var(--color-light-gray); }
.color-pink { color: var(--color-pink); }
.color-red { color: var(--color-red); }
.color-white { color: var(--color-white); }
.color-yellow { color: var(--color-yellow); }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.display-flex { display: flex; }
.error-if-empty:empty::before { color: red; content: "empty"; font-style: italic; }
.field-sizing-content { field-sizing: content; }
.flex-basis-0 { flex-basis: 0; }
.flex-direction-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.font-size-lg { font-size: var(--font-size-lg); }
.font-size-sm { font-size: var(--font-size-sm); }
.font-size-xs { font-size: var(--font-size-xs); }
.font-style-italic { font-style: italic; }
.font-weight-600 { font-weight: 600; }
.gap-lg { gap: var(--rem-lg); }
.gap-md { gap: var(--rem-md); }
.gap-sm { gap: var(--rem-sm); }
.height-1p1rem { height: 1.1rem; }
.height-1rem { height: 1rem; }
.height-2rem { height: 2rem; }
.justify-content-center { justify-content: center; }
.margin-0-auto { margin: 0 auto; }
.margin-left-auto { margin-left: auto; }
.margin-left-sm { margin-left: var(--rem-sm); }
.margin-top-auto { margin-top: auto; }
.max-width-50ch { max-width: 50ch; }
.min-height-100vh { min-height: 100vh; }
.min-width-0 { min-width: 0; }
.min-width-1ch { min-width: 1ch; }
.min-width-max-content { min-width: max-content; }
.padding-lg { padding: var(--rem-lg); }
.padding-md { padding: var(--rem-md); }
.padding-sm { padding: var(--rem-sm); }
.padding-xs { padding: var(--rem-xs); }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.processing { animation: pulse 1.2s ease-in-out infinite; }
.resize-none { resize: none; }
.right-100pct { right: 100%; }
.text-align-center { text-align: center; }
.text-decoration-none { text-decoration: none; }
.top-100pct { top: 100%; }
.top-n0p1rem { top: -0.1rem; }
.visibility-hidden { visibility: hidden; }
.width-1p1rem { width: 1.1rem; }
.width-1rem { width: 1rem; }

.font-roboto, body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

@keyframes pulse {
  50% { transform: scale(0.98); opacity: 0.6; }
}