:root {
  --background: #141D24;
  --surfacePrimary: #20292F;
  --surfaceSecondary: #3A4147;
  --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, #previewer .loading .spinner div {
  background: var(--icon);
}

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

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

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

.action {
  color: var(--textPrimary) !important;
}
.action:hover {
  background-color: rgba(255, 255, 255, .1);
}
.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;
}
.breadcrumbs a:hover {
  background-color: rgba(255, 255, 255, .1);
}

#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);
}

.message {
  color: var(--textPrimary);
}

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

.dashboard #nav ul li {
  color: var(--textSecondary);
}
.dashboard #nav ul li:hover {
  background: var(--surfaceSecondary);
}

.card h3,
.dashboard #nav,
.dashboard p label {
  color: var(--textPrimary);
}
.card#share input,
.card#share select,
.input {
  background: var(--surfaceSecondary);
  color: var(--textPrimary);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.input:hover,
.input:focus {
  border-color: rgba(255, 255, 255, 0.15);
}
.input--red {
  background: #73302D;
}

.input--green {
  background: #147A41;
}

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

table th {
  color: var(--textSecondary);
}

.file-list li:hover {
  background: var(--surfaceSecondary);
}
.file-list li:before {
  color: var(--textSecondary);
}
.file-list li[aria-selected=true]:before {
  color: var(--icon);
}

.shell {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}
.shell__result {
  border-top: 1px solid var(--divider);
}

#editor-container {
  background: var(--background);
}

#editor-container .bar {
  background: var(--surfacePrimary);
}

@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;
  }
}

.share__box {
  background: var(--surfacePrimary) !important;
  color: var(--textPrimary);
}

.share__box__element {
  border-top-color: var(--divider);
}