@keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
  to {
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-webkit-keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
  to {
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-moz-keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
  to {
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}
 @-webkit-keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
  to {
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
}

body[data-theme*=dark] .auth-wrapper .twinkling_stars {
  position: fixed;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
}

body[data-theme*=dark] .auth-wrapper .twinkling_stars .stars {
  background: black url("../images/login/stars.png") repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  z-index: 0;
}

body[data-theme*=dark] .auth-wrapper .twinkling_stars .twinkling {
  width: 10000px;
  height: 100%;
  background: transparent url("../images/login/twinkling.png") repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  -moz-animation: move-background 70s linear infinite;
  -ms-animation: move-background 70s linear infinite;
  -o-animation: move-background 70s linear infinite;
  -webkit-animation: move-background 70s linear infinite;
  animation: move-background 70s linear infinite;
}

body[data-theme*=dark] .auth-wrapper .twinkling_stars .clouds {
  width: 10000px;
  height: 100%;
  background: transparent url("../images/login/clouds_repeat.png") repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}

body[data-theme*=dark] .auth-wrapper .twinkling_stars .lua {
  background-image: url('../images/login/moon2.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 30vh;
  width: 30vh;
  position: absolute;
  z-index: 3;
  right: 0;
}

body[data-theme*=dark] #loginform > div.logo,
body[data-theme*=dark] #registerform > div.logo,
body[data-theme*=dark] #recoverform > div.logo {
  filter: opacity(0.7);
  background: url("../images/white-logo.svg") no-repeat center center;
  background-size: contain;
}

body[data-theme*=dark] #main-wrapper > footer > div > div:nth-child(2) > div > p {
  color: var(--bs-white);
}

body[data-theme*=dark] #login-form .social .btn-outline-light {
  color: #f8f9fa;
  border-color: var(--bs-gray-700);
  opacity: .75;
  filter: grayscale(1);
}

body[data-theme*=dark] #main-wrapper > footer .container .logo-footer {
  background-image: url('../images/white-logo.svg');
}

body[data-theme*=dark] #main-wrapper .btn-login {
  background: var(--bs-gray-dark);
  background-image: linear-gradient( 69.7deg, var(--bs-gray) 1.4%, var(--bs-gray-600) 36.2%, var(--bs-gray) 72.2%, var(--bs-gray-800) 113% );
}

body[data-theme*=dark] #main-wrapper .btn-login:hover {
  background: var(--bs-gradient-3);
  background-image: linear-gradient( 75deg, var(--bs-blue) 1.4%, var(--bs-gradient-3) 36.2%, var(--bs-gradient-3) 72.2%, var(--bs-gray-800) 113% );
  color: var(--bs-white);
}

body[data-theme*=dark] #loginform:after {
  filter: grayscale(1);
}