.box {
  padding: 1rem;
  box-shadow: 0 0 0 10px red;
  border-radius: 0.5rem;
  background: red; }

pre, body, .table thead th {
  color: red; }

pre {
  background: red; }

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  min-height: 100%; }

.sidebar {
  background: red;
  flex: 0 0 auto;
  padding: 0 0.5rem;
  z-index: 2;
  box-shadow: 0 0 0 10px red; }
  .sidebar a {
    color: red; }
    .sidebar a:active {
      color: red; }
    .sidebar a:not(.is-active):hover {
      color: red;
      background: red; }

.sidebar > .big, .sidebar > .big * {
  color: red !important;
  text-align: center;
  font-size: 1.8rem;
  list-style-type: none;
  font-weight: lighter; }

hash-template {
  display: none; }

hash-template.unhidden {
  display: flex; }

.menu-list li, .menu-list a {
  transition: all 0.2s; }

#app {
  flex: 1 1 auto;
  margin: 1em; }

#app .panel {
  background: red;
  flex: 1 1 auto;
  position: relative; }

#app .panel .panel-header {
  background: red; }

#app .panel .panel-header .title, #app .panel .panel-header .subtitle {
  font-weight: lighter;
  color: red; }

#app .panel .panel-header .subtitle {
  margin-top: -.8rem; }

#app .panel .panel-header {
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 1rem;
  padding: 2rem; }

@media all and (min-width: 550px) {
  background: red;
  hash-template {
    justify-content: center; }
  #app .panel {
    background: red;
    padding: 2rem;
    max-width: 75rem;
    box-shadow: 0 0 0 10px red;
    border-radius: 1rem;
    overflow: hidden; }
  #app .panel .panel-header {
    margin-top: -2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: 2rem;
    padding: 2rem; }
  #sidebar {
    min-width: 5em; } }

#app .panel {
  height: 100%;
  background: red; }

#popup-area {
  position: fixed;
  width: 100%;
  height: 0;
  bottom: 2em;
  left: 0;
  right: -2em;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
  justify-content: flex-end;
  align-items: flex-end; }

.popup {
  position: relative;
  transform: translateX(-2em) translateZ(0) scale(1);
  opacity: 0;
  flex: 0 1 auto;
  position: relative;
  z-index: 10;
  opacity: 1;
  transition: all 0.5s;
  box-shadow: 0 0 0 10px red;
  width: 15rem; }

.popup.fadein {
  opacity: 1;
  transform: translateX(-2em) translateY(6rem) scale(0); }

.popup.fadeout {
  transition: all 2s;
  opacity: 0;
  transform: translateX(40rem) scale(1); }

.thumb {
  display: inline-block;
  height: 100px;
  width: 100px;
  object-fit: cover; }

.asset {
  display: flex;
  align-items: center;
  border-bottom: solid 1px red; }

.asset:first-child {
  border-top: solid 1px red; }

.asset > * {
  margin: 0.5rem; }

.textedit {
  font-family: monospace;
  white-space: pre;
  overflow: auto; }

.padded {
  padding: 1rem; }

.gallery {
  display: flex;
  text-align: center;
  justify-content: space-between;
  flex-direction: column; }

.gallery > * {
  flex: 1 1 auto; }

.button:hover {
  color: red;
  background: red; }

.button:focus {
  color: red; }

.menu .button {
  text-align: left;
  height: inherit; }

.snackbar .text {
  color: red; }

.asset-edit {
  display: flex;
  flex-direction: row; }

.asset-edit > .asset-preview {
  height: 100px;
  flex-shrink: 0; }

.asset-edit > .asset-rows {
  display: flex;
  flex-direction: column;
  margin: 0 0 0 1rem; }

.asset-edit > .asset-rows > .asset-row {
  height: 50%;
  line-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.uploads-area {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between; }

.uploads-area .upload-tile {
  width: 50%;
  justify-content: space-between;
  flex: 1 0 auto; }

.upload-tile .box.margined {
  margin-bottom: 1rem; }

.upload-tile:nth-child(even) .box.margined, .upload-tile:last-child .box.margined {
  margin-right: 0 !important; }

.upload-tile:nth-child(odd) .box.margined {
  margin-right: 1rem; }

@media all and (max-width: 1150px) {
  .uploads-area .upload-tile {
    width: 100%; }
  .box.margined {
    margin-right: 0 !important; } }