:root {
  --mb-bg: #f7f8f8;
  --mb-surface: #ffffff;
  --mb-soft: #f1f4f4;
  --mb-line: #dfe5e7;
  --mb-line-strong: #c8d0d4;
  --mb-ink: #18222c;
  --mb-muted: #687581;
  --mb-accent: #79d3d0;
  --mb-accent-strong: #37aaa7;
  --mb-dark: #111b24;
  --mb-shadow: 0 20px 60px rgba(18, 27, 36, 0.12);
  --mb-header-h: 76px;
  --mb-leftnav-w: 84px;
  --mb-leftnav-open-w: 292px;
  --mb-rightnav-w: 76px;
  --mb-font: "Segoe UI Light", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color: var(--mb-ink);
  background: var(--mb-bg);
  font-family: var(--mb-font);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--mb-ink);
  background: var(--mb-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.mdl.page {
  min-height: 100vh;
  background: var(--mb-bg);
}

.mdl.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mdl.workspace {
  display: grid;
  grid-template-columns: var(--mb-leftnav-w) minmax(0, 1fr) var(--mb-rightnav-w);
  min-height: calc(100vh - var(--mb-header-h));
}

@media (max-width: 900px) {
  :root {
    --mb-header-h: 68px;
    --mb-leftnav-w: 74px;
    --mb-leftnav-open-w: 218px;
    --mb-rightnav-w: 0px;
  }

  .mdl.workspace {
    grid-template-columns: var(--mb-leftnav-w) minmax(0, 1fr);
  }
}