html {
  color: #fff;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

section {
  flex: 1;
}

.preview-toggle .button,
.card-footer-item .button,
.card,
.box,
.box .label,
.navbar-menu,
.footer {
  background-color: #363636;
  color: #fff;
}

.card .content {
  margin-bottom: 0;
}

.dropdown-content,
.dropdown-menu,
.content table {
  color: #fff;
  background-color: rgba(16, 16, 16, 0.5);
  z-index: 100;
}

.preview-toggle .button {
  border-color: #363636;
}

.card .card-footer,
.card .card-footer-item,
.input {
  border-color: #222;
}

.card-header-title,
.table thead th,
.dropdown-item {
  color: #fff;
  display: block;
  flex-grow: 0;
}

.dropdown-content .dropdown-item.is-active {
  background-color: rgba(110, 118, 129, 0.4);
}


a {
  color: #1abc9c;
}

a:hover {
  color: #1dd2af;
}

.preview-toggle .button:not(.is-active):hover,
.card-footer-item:hover {
  background-color: #292929;
  border-color: #292929;
  color: #009670;
}

.preview-toggle .button.is-active {
  background-color: #00bc8c;
  border-color: #00bc8c
}

.preview-toggle .button.is-active:hover {
  background-color: #00a077;
}

code {
  background-color: rgba(110, 118, 129, 0.4);
  color: rgb(255, 123, 114);
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.input,
.input::placeholder,
.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: #444;
  color: #adb5bd;
}

.input:hover,
.input:active,
.input:focus,
.control.has-icons-left .input:focus~.icon {
  color: #fff;
}

video {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ghost {
  border: 1px dashed #000;
  background-color: #444;
}

.ghost * {
  visibility: hidden;
}

.custom-drag-ghost {
  /* The original cloned element must not take place up in the page and must not be visible */
  position: absolute;
  top: -99999px;
  left: -99999px;
  /* Just for appearance */
  background-color: #edb458;
  border: 1px solid #e8871e;
}

.hidden-drag-ghost {
  opacity: 0;
}

.transition {
  transition: all 2s ease-out 0.5s;
  top: 0;
}

[data-enabled=True] video.placeholder,
.status .fa-circle-play,
.status .fa-circle-pause,
.status .fa-satellite-dish,
.fa-arrows-rotate,
.card-header-title .icon.battery {
  cursor: pointer;
}

video,
video+.fas {
  display: block;
}

figure.image:hover>video.placeholder {
  transition: .3s ease;
  background-color: transparent;
  opacity: 0.8;
}

video+i::before {
  color: white;
  font-size: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px #444;
}

video.lost+i::before {
  content: "\e560";
}

video.lost,
video.lost+i {
  cursor: default;
}

.card-image:has([src$=".svg"]) {
  background-color: #000;
}

.is-overlay button,
.card:hover .age,
button:not(.offline):disabled+.age {
  display: none;
}

.card:hover .is-overlay button {
  display: inline-block;
}

.fs-mode .card-header-title {
  opacity: 0.8;
  transition: 0.5s;
}

.is-overlay .age,
.card:hover>.fs-mode .card-header-title {
  transition: 0.5s;
  text-shadow: #000 0px 0px 2px;
  opacity: 1;
}


.drag_handle {
  cursor: move;
  flex-grow: 2;
}

.card {
  border-radius: 0.75rem;
  transition: box-shadow 0.5s ease-in-out;
}

.drag_hover {
  box-shadow: 0 0 20px 1px #ffffffb1;
}

@media (prefers-color-scheme: dark) {
  .has-background-black-ter {
    background-color: #0a0a0a !important;
  }
}

.fullscreen button {
  display: inline-block;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  opacity: 0.25;
  transition: 0.5s;
}

.fullscreen button:hover {
  opacity: 1;
}

.card-content {
  padding: 1rem;
}

.fs-mode {
  visibility: hidden;
  height: 0;
}

.fs-mode .card-header-title {
  visibility: visible;
  z-index: 100;
  margin: 0;
  padding: 1.5rem 1rem;
}

nav.fs-mode,
footer.fs-mode {
  display: none;
}

/* Fix for Jittery Video in Firefox #1025 */
@-moz-document url-prefix() {
  body::after {
    width: 1px;
    height: 1px;
    position: fixed;
    backdrop-filter: blur(0.01rem);
    content: "";
  }
}