@media (prefers-color-scheme: dark) {
  body {
    color: #fff !important;
    background-color: #616161 !important;
  }

  .nav-dark {
    color: #fff !important;
    background-color: #3f51b5 !important;
  }

  .btn-dark {
    color: #fff !important;
    background-color: #607d8b !important;
  }
  .no-more-dark {
    color: #fff !important;
    background-color: #607d8b !important;
  }
  .input-dark {
    color: #fff !important;
    background-color: #9e9e9e !important;
    border: none !important;
  }
  .dark-striped tbody tr:nth-child(2n) {
    background-color: #9e9e9e;
  }

  .w3-select {
    color: #fff !important;
    background-color: #616161 !important;
  }
}

/* Indeterminite horizontal loader - Material Design */

#loader-bg {
  position: fixed;
  top: 0;
  height: 6px;
  width: 100%;
  background-color: #add8e6;
  overflow: hidden;
}

#loader-animation-slow {
  position: absolute;
  height: 6px;
  width: 33%;
  top: 0;
  left: 67%;
  background-color: #00008b;
  animation-name: loader-animation-slow;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#loader-animation-fast {
  position: absolute;
  height: 6px;
  width: 33%;
  top: 0;
  left: 67%;
  background-color: #00008b;
  animation-name: loader-animation-fast;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#feed-tools {
  display: flex;
  align-items: center;
}

#feed-tools > * {
  margin: 0 4px;
}

#close-article-content-modal {
  position: sticky;
  background-color: rgba(97, 97, 97, 0.7);
}

#content-container {
  display: flex;
  justify-content: center;
}

#main-content {
  max-width: 800px;
  flex-grow: 1;
}

#password-container {
    position: relative;
}

#password-icon {
    position: absolute;
    right: 0.5rem;
    top: calc(50% - 10px);
    width: 20px;
    cursor: pointer;
}

i.btn-icon {
  vertical-align: middle;
}

h3.bg-image {
  padding-top: 5em;
  padding-left: 0.25em;
  background-size: cover;
  background-position-y: 33%;
  box-shadow: inset -2px -2px 5px 0px white, inset 2px 2px 5px 0px white;
}

h3.bg-image > span {
  color: white;
  background-color: rgba(97, 97, 97, 0.7);
  padding: 3px;
}

.item {
  transition: opacity 250ms ease-in-out;
}

@media (prefers-color-scheme: dark) {
  h3.bg-image {
    box-shadow: inset -2px -2px 5px 0px #616161, inset 2px 2px 5px 0px #616161;
  }
}

@keyframes loader-animation-slow {
  0% {
    width: 0%;
    left: 0%;
  }
  10% {
    width: 20%;
    left: 0%;
  }
  20% {
    width: 50%;
    left: 2%;
  }
  30% {
    width: 67%;
    left: 16%;
  }
  40% {
    width: 67%;
    left: 33%;
  }
  50% {
    width: 33%;
    left: 67%;
  }
  60% {
    width: 0%;
    left: 100%;
  }
  100% {
    width: 0%;
    left: 0%;
  }
}

@keyframes loader-animation-fast {
  0% {
    width: 0%;
    left: 0%;
  }
  50% {
    width: 0%;
    left: 0%;
  }
  60% {
    width: 50%;
    left: 0%;
  }
  65% {
    width: 67%;
    left: 6%;
  }
  70% {
    width: 40%;
    left: 40%;
  }
  75% {
    width: 30%;
    left: 70%;
  }
  80% {
    width: 10%;
    left: 90%;
  }
  85% {
    width: 2%;
    left: 98%;
  }
  90% {
    width: 0%;
    left: 100%;
  }
  100% {
    width: 0%;
    left: 0%;
  }
}

.article-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}