html {
  min-height: 100%;
  display: flex;
}

body {
  display: flex;
  flex-direction: column;
  background: url(../img/background.svg) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  align-items: center;
}

code {
  font-family: 'Open Sans', 'Courier New';
  font-weight: 100;
  display: block;
}

.content {
  background-color: #000000AA;
  width: 80%;
  height: 80%;
  color: #FFF;
  overflow: hidden;
  font-family: 'Open Sans', 'Courier New';
  font-weight: 100;
  /*transition: all 10s ease-in-out;*/
  margin: 5%;
  min-height: 260px;
}

.content h1 {
  text-align: center;
}

.navigation {
  display: flex;
  flex-direction: row;
  padding-left: 10px;
  padding-right: 10px;
}

.navigation h2 {
  flex-grow: 0.25;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.navigation h2:hover {
  color: orange;
}

.advanced .route:hover {
  color: orange;
  cursor: pointer;
}

.navigation-active {
  border-bottom: 1px solid #2596be;
}

.router {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.search {
  display: none;
  flex-direction: column;
}

.text-field {
  background-color: transparent;
  color: white;
  border: 1px solid lightblue;
  border-radius: 7px;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  transition: all .3s ease-out
}

.text-field:focus {
  outline: none !important;
  border: 1px solid #2596be;
  box-shadow: 0 0 10px #719ECE;
}

.search-result {
  display: flex;
  flex-direction: row;
}

.search-result:hover {
  background-color: #4B94BA66;
}

.search-result-template {
  display: none;
}

.search-result-release {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;
  padding-right: 10px;
}

.search-yielded-no-results {
  display: none;
}

.search-result-download:hover {
  color: orange;
  cursor: pointer;
  user-select: none;
}

.search-result-added {
  display: none;
}

.text-green {
  color: greenyellow;
}

.text-red {
  color: #F09573;
}

.navigation-mobile {
  display: none;
}

.menu-btn {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border:3px solid #fff;
  transform: scale(50%);
}

.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}

.menu-btn__burger::before {
  transform: translateY(-16px);
}

.menu-btn__burger::after {
  transform: translateY(16px);
}


.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
}

.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
  background: #fa00c4;
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
  background: #fa00c4;
}

.menu-btn.open{
  border: 3px solid #fa00c4;
}

.menu-body {
  position: absolute;
  width: 23em;
  height: 20em;
  margin: 0;
  padding: 0;
  background-color: #000D;
  box-shadow: 3px 3px 7px rgba(black, .2);
  z-index: 10;
  top: -3px;
  left: -430px;
  display: none;
  flex-direction: column;
  padding: 25px;
  border: 3px solid white;
}

.menu-body h1 {
  margin: auto;
}

.greedy {
  flex-grow: 1;
}

.premium-generator {
  flex-direction: column;
}

.raw-ftp-search {
  flex-direction: column;
}

/* https://codepen.io/yuhomyan/pen/GRobbXB */
.btn-11 {
  border: 1px solid #21ebff;
  color: #21ebff;
  box-shadow: 0 0 5px #21ebff, 0 0 5px #21ebff inset;
  transition: all 0.3s ease;
  flex-shrink: 1;
  width: 120px;
  height: 27px;
  background-color: #000;
  cursor: pointer;
  border-radius: 10px;
  font-size: 20px;
  font-weight: lighter;
  font-family: 'Courier New';
}
.btn-11:hover{
   text-shadow:
    0 0 20px #21ebff,
    0 0 50px rgba(33, 235, 255, .9),
    0 0 75px rgba(33, 235, 255, .8),
    0 0 76px rgba(33, 235, 255, .7),
    0 0 77px rgba(33, 235, 255, .6),
    0 0 78px rgba(33, 235, 255, .5),
    0 0 79px rgba(33, 235, 255, .4),
    0 0 80px rgba(33, 235, 255, .3),
    0 0 85px rgba(33, 235, 255, .2),
     0 0 99px rgba(33, 235, 255, .1);
}
.btn-11:focus{
  color: grey;
}

.download-button-wrapper {
  display: flex;
}

.download-error {
  margin-top: 15px;
  display: none;
}

.downloads-status {
  white-space: nowrap;
  text-align: end;
}

.requests {
  flex-direction: column;
}

.advanced {
  flex-direction: column;
}

.requests-description {
  display: inline;
  margin-bottom: 15px;
}

.requests-description a {
  color: #4A92EB;
}

.requests p {
  margin-top: 0px;
}

.requests h3 {
  margin-bottom: 5px;
  margin-top: 0px;
}

.requests .text-field {
  margin-top: 0px;
}

.requests-open-heading {
  margin-top: 30px !important;
}

.downloads {
  flex-direction: column;
}

.flex-table {
  display: flex;
  flex-direction: row;
}

.downloads-not-started-yet {
  display: none;
}

.downloads-release-names {
  white-space: nowrap;
  /*
  text-overflow: ellipsis;
  overflow: hidden;
  */
  overflow-x: scroll;
  margin-right: 5px;
  scrollbar-width: none;
}

.download-release {
  /*
  text-overflow: ellipsis;
  overflow: hidden;
  */
  white-space: nowrap;
}

.requests-list {
  overflow-x: scroll;
  white-space: nowrap;
  scrollbar-width: none;
}

.standard-link {
  color: #4A92EB;
}

.standard-link:hover {
  color:rgba(33, 235, 255, .9);
}

/* padlock: https://codepen.io/gmirmand/pen/Yebbpd */
#locker_1 {
  -webkit-animation: bounce-locker 1.7s infinite;
          animation: bounce-locker 1.7s infinite;
}

.padlock {
  fill: transparent;
  transform-origin: center center;
  width: 150px;
}
.padlock .locker {
  stroke: url(#a);
  stroke-width: 40;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.padlock .locker-block {
  z-index: 1;
  fill: #fff;
}
.padlock .locker.bar {
  transform: translateY(50px);
  /*-webkit-animation: unlock 1.7s ease infinite;
          animation: unlock 1.7s ease infinite;*/
}

.key {
  fill: url(#a);
  transform-origin: center 300px;
}

.login-message {
  margin-top: 20px;
  display: none;
}

/* ===== Scrollbar CSS ===== */
/* https://codepen.io/stephenpaton-tech/details/JjRvGmY */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #757575 #000000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #757575;
  border-radius: 10px;
  border: 3px solid #ffffff;
}
/* ===== Scrollbar CSS ===== */

.flex-hor {
  display: flex;
  flex-direction: row;
}

/* combobox: https://codepen.io/avstorm/pen/bPOgRO */
.combobox {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 10px;
}
.select {
  position: relative;
  min-width: 200px;
}
.select svg {
  position: absolute;
  right: 14px;
  top: calc(50% - 3px);
  width: 10px;
  height: 6px;
  stroke-width: 2px;
  stroke: #9098a9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.select select {
  -webkit-appearance: none;
  padding: 7px 40px 7px 12px;
  width: 100%;
  border: 1px solid #e8eaed;
  border-radius: 5px;
  background: transparent;
  box-shadow: 0 1px 3px -2px #9098a9;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  transition: all 150ms ease;
  height: 46px;
  color: white;
}
.select select:focus {
  outline: none !important;
  border: 1px solid #2596be;
  box-shadow: 0 0 10px #719ECE;
}
.select select:required:invalid {
  color: lightgray;
}
.select select option {
  color: black;
}
.select select option[value=""][disabled] {
  display: none;
}
.select select:focus {
  outline: none;
  border-color: #2596be;
  box-shadow: 0 0 10px #719ECE;
}
.select select:hover + svg {
  stroke: #07f;
}
.sprites {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
/* combox */

@-webkit-keyframes unlock {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
}

@keyframes unlock {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
}
@-webkit-keyframes bounce-locker {
  10% {
    transform: translateY(-4px);
  }
  17% {
    transform: translateY(2px);
  }
  40% {
    transform: translateY(0);
  }
}
@keyframes bounce-locker {
  10% {
    transform: translateY(-4px);
  }
  17% {
    transform: translateY(2px);
  }
  40% {
    transform: translateY(0);
  }
}
/* end padlock */
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-field {
  text-align: center;
}

.login {
  margin-bottom: 20px;
}

.logged-in {
  display: none;
}

@media screen and (max-width: 800px) {
  .navigation {
    display: none;
  }
  .navigation-mobile {
    display: flex;
  }
  .title {
    display: none;
  }
  .content h1 {
    text-align: left;
    margin-left: 20px;
  }
  .flex-hor {
    flex-direction: column;
  }
  .combobox {
    margin-top: 15px;
    margin-right: unset;
  }
}