body {
  background-color: #121212;
  background: linear-gradient(to bottom,  rgba(18,18,18,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  height: 100vh;
  color: #e0e0e0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

input.form-control {
  background-color: #2c2c2c;
  border: 1px solid #444;
  color: #fff;
}

input.form-control::placeholder {
  color: #aaa;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.no-outline {
  outline:0px !important;
  -webkit-appearance:none;
  box-shadow: none !important;
}

.table, .table td, .table th {
  background-color: transparent !important;
  border-color: #222222 !important;
}


::-moz-selection {
  background: #303030;
}

::selection {
  background: #303030;
}



._RayContainer {
    --gradient-opacity: .85;
    --ray-gradient: radial-gradient(rgba(83, 196, 255, var(--gradient-opacity)) 0%, rgba(43, 166, 255, 0) 100%);
    transition: opacity .25s linear;
    position: fixed;
    inset: 0;
    pointer-events: none;
    user-select: none
}

._RayContainer {
    animation: .25s linear 0s 1 _fade-in
}

._RayContainer ._LightRay {
    position: absolute;
    border-radius: 100%;
    background: var(--ray-gradient)
}

._RayContainer ._RayOne {
    width: 480px;
    height: 680px;
    transform: rotate(80deg);
    top: -540px;
    left: 250px;
    filter: blur(110px)
}

._RayContainer ._RayTwo {
    width: 110px;
    height: 400px;
    transform: rotate(-20deg);
    top: -280px;
    left: 350px;
    mix-blend-mode: overlay;
    opacity: .6;
    filter: blur(60px)
}

._RayContainer ._RayThree {
    width: 400px;
    height: 370px;
    top: -350px;
    left: 200px;
    mix-blend-mode: overlay;
    opacity: .6;
    filter: blur(21px)
}

._RayContainer ._RayFour {
    position: absolute;
    width: 330px;
    height: 370px;
    top: -330px;
    left: 50px;
    mix-blend-mode: overlay;
    opacity: .5;
    filter: blur(21px)
}

._RayContainer ._RayFive {
    position: absolute;
    width: 110px;
    height: 400px;
    transform: rotate(-40deg);
    top: -280px;
    left: -10px;
    mix-blend-mode: overlay;
    opacity: .8;
    filter: blur(60px)
}





.bg {
  animation: slide 5s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #121212 50%, #000000 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration: 6s;
}

.bg3 {
  animation-duration: 7s;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}