html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#react-entry-point {
  flex: 1;
}

footer {
  text-align: center;
  font-size: 12px;
  color: gray;
  margin-top: auto;
  padding: 1em;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 2px black;
    pointer-events: none;
}

/* Fix dropdown menu background and text color */
.Select-menu-outer, .Select-menu, .Select-control {
    background-color: #343a40 !important;
    color: white !important;
    border-color: #6c757d !important;
}

/* Selected item */
.Select-value {
    color: white !important;
}

/* Placeholder text */
.Select-placeholder {
    color: #adb5bd !important;  /* light grey */
}

/* Hovered options */
.VirtualizedSelectOption:hover {
    background-color: #495057 !important;
    color: white !important;
}

/* Multi-value items */
.Select-value-label {
    color: white !important;
}

/* assets/dark-code.css */
:root {
  --code-fg: #e6e6e6;
  --code-bg: #161b22; /* dark gray-blue */
  --code-border: #30363d;
}

code,
.alert code,
pre code {
  color: var(--code-fg) !important;
  background-color: var(--code-bg) !important;
  border: 1px solid var(--code-border);
  padding: .2rem .45rem;
  border-radius: .375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

pre {
  background-color: var(--code-bg) !important;
  color: var(--code-fg) !important;
  padding: .75rem;
  border-radius: .5rem;
  border: 1px solid var(--code-border);
  overflow: auto;
}