:root {
  --background: #121212;
  --surfacePrimary: #171819;
  --surfaceSecondary: #212528;
  --divider: rgba(255, 255, 255, 0.12);
  --icon: #ffffff;
  --textPrimary: rgba(255, 255, 255, 0.87);
  --textSecondary: rgba(255, 255, 255, 0.6);
}

body {
  background: var(--background);
  color: var(--textPrimary);
}

#loading {
  background: var(--background);
}
#loading .spinner div {
  background: var(--icon);
}

#login {
  background: var(--background);
}

header {
  background: var(--surfacePrimary);
}

#search #input {
  background: var(--surfaceSecondary);
}
#search.active #input,
#search.active .boxes {
  background: var(--surfacePrimary);
}
#search.active input {
  color: var(--textPrimary);
}
#search.active #result {
  background: var(--background);
  color: var(--textPrimary);
}
#search.active .boxes h3 {
  color: var(--textPrimary);
}

.action {
  color: var(--textPrimary) !important;
}
.action i {
  color: var(--icon) !important;
}
.action .counter {
  border-color: var(--surfacePrimary);
}

nav > div {
  border-color: var(--divider);
}

#breadcrumbs {
  border-color: var(--divider);
  color: var(--textPrimary) !important;
}
#breadcrumbs span {
  color: var(--textPrimary) !important;
}

#listing .item {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
  border-color: var(--divider) !important;
}
#listing .item i {
  color: var(--icon);
}
#listing .item .modified {
  color: var(--textSecondary);
}
#listing h2,
#listing.list .header span {
  color: var(--textPrimary) !important;
}
#listing.list .header span {
  color: var(--textPrimary);
}
#listing.list .header i {
  color: var(--icon);
}
#listing.list .item.header {
  background: var(--background);
}

.card {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}
.button--flat:hover {
  background: var(--surfaceSecondary);
}

.card h3,
.dashboard #nav,
.dashboard p label {
  color: var(--textPrimary);
}
.input {
  background: var(--surfaceSecondary);
  color: var(--textPrimary);
}

.dashboard #nav li,
.collapsible {
  border-color: var(--divider);
}
.collapsible > label * {
  color: var(--textPrimary);
}

.shell {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}

@media (max-width: 736px) {
  #file-selection {
    background: var(--surfaceSecondary) !important;
  }
  #file-selection span {
    color: var(--textPrimary) !important;
  }
  nav {
    background: var(--surfaceSecondary) !important;
  }
  #dropdown {
    background: var(--surfaceSecondary) !important;
  }
}