html { color: var(--text-main); }
::-moz-selection { background: var(--accent-quiet); text-shadow: none; }
::selection { background: var(--accent-quiet); text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid var(--border-neutral); margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
html { width: 100%; height: 100%; touch-action: manipulation; }
body { width: 100%; min-height: 100%; margin: 0; }
main { display: block; }
*[hidden] { display: none !important; }
html, body { font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; }
h1, h2, h3, h4, h5, h6, p { padding: 0; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; opacity: .54; font-size: .6em; }
h1 { font-size: 56px; line-height: 1.35; letter-spacing: -.02em; margin: 24px 0; }
h1, h2 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; }
h2 { font-size: 45px; line-height: 48px; }
h2, h3 { margin: 24px 0; }
h3 { font-size: 34px; line-height: 40px; }
h3, h4 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; }
h4 { font-size: 24px; line-height: 32px; -moz-osx-font-smoothing: grayscale; margin: 24px 0 16px; }
h5 { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .02em; }
h5, h6 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; margin: 24px 0 16px; }
h6 { font-size: 16px; letter-spacing: .04em; }
h6, p { font-weight: 400; line-height: 24px; }
p { font-size: 14px; letter-spacing: 0; margin: 0 0 16px; }
a { color: var(--text-accent); font-weight: 500; }
blockquote { font-family: "Roboto", "Helvetica", "Arial", sans-serif; position: relative; font-size: 24px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: .08em; }
blockquote:before { position: absolute; left: -.5em; content: "\201C"; }
blockquote:after { content: "\201D"; margin-left: -.05em; }
mark { background-color: var(--warning-quiet); }
dt { font-weight: 700; }
address { font-size: 12px; line-height: 1; font-style: normal; }
address, ul, ol { font-weight: 400; letter-spacing: 0; }
ul, ol { font-size: 14px; line-height: 24px; }

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  height: 100%;
  --spacing: 8px;
}

h1 {
  margin-top: 0px;
}

h2 {
  margin-top: 0px;
  font-size: 24px;
  font-weight: 500;
}

h3 {
  margin-top: 0px;
  font-size: 18px;
  font-weight: 500;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
a {
  text-decoration: none
}
a.disabled {
  pointer-events: none;
  cursor: default;
}
.d-flex {
  display: flex;
}
.justify-content-center {
  justify-content: center;
}

.p-2  { padding: calc(var(--spacing)*2); }

.w-100 {
  width: 100%;
  box-sizing: border-box;
}

.has-error .help-block {
  color: var(--danger);
}

.form-group {
  margin-bottom: 16px;
}

.control-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--type-small-size);
  color: var(--text-light);
}

.form-control {
  box-sizing: border-box;
  max-width: 100%;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid var(--border-neutral);
  background: transparent;
  color: inherit;
  font: inherit;
}

input.form-control,
textarea.form-control {
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.form-control:disabled {
  color: var(--text-faint);
}

.row {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

[data-kanban-target="card"] {
    cursor: grab;
}

[data-kanban-target="card"].is-dragging {
    opacity: .4;
}

.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.snackbar-message {
  box-sizing: border-box;
  max-width: min(568px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--hoot-color-neutral-900);
  color: var(--hoot-color-base-white);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  box-shadow: var(--shadow-overlay);
}