body {
  background: linear-gradient(to right, #001011 10%, #001011 100%);
  z-index: -1;
  overflow-x:hidden;
  overflow-y: hidden;
}

/* loading  */
.auth-wrapper.auth-basic .auth-inner:before {
  background: none !important;
}
.auth-wrapper.auth-basic .auth-inner:after {
  background: none !important;
}

.dark-layout body, body.dark-layout {
  color: #B4B7BD;
  background-color: #202124 !important;
}

.dark-layout .card {
  background-color: #202124 !important;
}
/* end loading  */

link:hover {
  color: 001011;
}
.bg-bubbles {
  position: absolute;
  top: 0;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: -2;
}

@-webkit-keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}

@media (max-width: 850px) {
  .bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 0px;
    height: 0px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    transition-timing-function: linear;
  }
  .bg-bubbles li:nth-child(1) {
    left: 50%;
  }
  .bg-bubbles li:nth-child(2) {
    left: 15%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
  }
  .bg-bubbles li:nth-child(3) {
    left: 18%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  .bg-bubbles li:nth-child(4) {
    left: 5%;
    width: 0px;
    height: 0px;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubbles li:nth-child(5) {
    left: 3%;
  }
  .bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .bg-bubbles li:nth-child(7) {
    left: 86%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  .bg-bubbles li:nth-child(8) {
    left: 72%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }
  .bg-bubbles li:nth-child(9) {
    left: 21%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 0px;
    height: 0px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
  }
  #form {
    margin-left:5%; 
    margin-right:5%; 
    margin-top:30%; 
    width:90%
  }
}

@media (min-width: 851px) {
  .bg-bubbles li {
    position: fixed;
    overflow-y: hidden;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    transition-timing-function: linear;
  }
  .bg-bubbles li:nth-child(1) {
    left: 3%;
  }
  .bg-bubbles li:nth-child(2) {
    left: 15%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
  }
  .bg-bubbles li:nth-child(3) {
    left: 10%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  .bg-bubbles li:nth-child(4) {
    left: 35%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubbles li:nth-child(5) {
    left: 43%;
  }
  .bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .bg-bubbles li:nth-child(7) {
    left: 86%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  .bg-bubbles li:nth-child(8) {
    left: 72%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }
  .bg-bubbles li:nth-child(9) {
    left: 21%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
  }
  body {
    overflow: scroll; /* Hide scrollbars */
  }
  #form {
    margin-left:33%; 
    margin-right:33%; 
    margin-top:10%; 
    max-width:33%; 
    min-width:400px;
  }
}