:root {
  --background: #333333 !important; /*BDO-CHARCOAL*/
  --surfacePrimary: #ed1a3b !important; /* BDO-RED */
  --surfaceSecondary: #FFFFFF !important;
  --divider: rgba(255, 255, 255, 0.12) !important;
  --icon: #ffffff !important;
  --textPrimary: rgba(255, 255, 255, 0.87) !important;
  --textSecondary: rgba(255, 255, 255, 0.6) !important;
  --textInput: rgba(10, 10, 10, 0.87) !important;
  --button: #c6102b !important;
  --buttonHover: #f04c64 !important;
}

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

#login h1 {
  font-size: 2.0em;
  font-family: "Open Sans",Helvetica,Arial,sans-serif;
  font-weight: 300;
}

#login img {
  position: relative;
  top: -50px;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  right: 50%;
  width: 100vw;
}

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

#search #input {
  background: #3A4147;
  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: var(--buttonHover);
}
.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, 
.breadcrumbs span {
  color: var(--textPrimary);
}

.breadcrumbs a:hover {
  background-color: var(--buttonHover);
}

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

.button {
	background-color: var(--button);
}
.button:hover {
	background-color: var(--buttonHover);
}
.button--flat:hover {
  background: var(--buttonHover);
  color: var(--textPrimary);
}
.button--flat {
  color: var(--textPrimary);
}
.button--flat.button--red {
    color: var(--textPrimary);
}

.card h3,
.dashboard #nav,
.dashboard p label {
  color: var(--textPrimary);
}
.card#share ul li input,
.card#share ul li select,
.input {
  background: var(--surfaceSecondary);
  color: var(--textInput);
  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 li,
.collapsible {
  border-color: var(--divider);
}
.collapsible > label * {
  color: var(--textPrimary);
}

.dashboard #nav ul {
  color: var(--textPrimary);
}

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

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

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

.dashboard #nav ul li.active {
  border-color: var(--textPrimary);
  color: var(--textPrimary);
}

.dashboard #nav ul li.active::before {
   background: var(--surfacePrimary);
   opacity: 0.2; 
}

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

.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(--surfacePrimary) !important;
  }
  #file-selection span {
    color: var(--textPrimary) !important;
  }
  nav {
    background: var(--background) !important;
  }
  #dropdown {
    background: var(--background) !important;
  }
}

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

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