body{
    height: 100vh;
    /*background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, #e8eaea 0%, #e8eaea 100%);    display: flex;*/
    background-image:  url('../images/login_bg.png');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .card{
    overflow: hidden;
    border: 0 !important;
    /*border-radius: 20px !important;*/
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
  }

  .img-left{
    width: 45%;
    background-size: cover;
  }

  .card-body{
    padding: 0.5rem;
  }

  .title{
    margin-bottom: 2rem;
    /*color: #3490dc;*/
    color: #6c757d;
    font-weight: bold;
  }

  /*.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before{
    background-color: #e50b0b !important;
    border: 0px;
  }*/

  /*.form-box button[type="submit"]{
    margin-top: 10px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    background: #e50b0b;
    color: #fff;
    font-size: 90%;
    font-weight: bold;
    letter-spacing: .1rem;
    transition: 0.5s;
    padding: 12px;
  }

  .form-box button[type="submit"]:hover{
    background: #e50b0b;
  }*/

  /*.forget-link, .register-link{
    color: #6ec4dd;
    font-weight: bold;
  }

  .forget-link:hover, .register-link:hover{
    color: #16717e;
    text-decoration: none;
  }*/
  .fondo{
     background-image:  url('../img/loginfondo.png');


 background-position: left;

 background-size: cover;
  }
  .datos{
    padding: 20px;
  }

  .circles{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .circles li{
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      animation: animate 25s linear infinite;
      bottom: -150px;

  }

  .circles li:nth-child(1){
      left: 25%;
      width: 80px;
      height: 80px;
      animation-delay: 0s;
  }


  .circles li:nth-child(2){
      left: 10%;
      width: 20px;
      height: 20px;
      animation-delay: 2s;
      animation-duration: 12s;
  }

  .circles li:nth-child(3){
      left: 70%;
      width: 20px;
      height: 20px;
      animation-delay: 4s;
  }

  .circles li:nth-child(4){
      left: 40%;
      width: 60px;
      height: 60px;
      animation-delay: 0s;
      animation-duration: 18s;
  }

  .circles li:nth-child(5){
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 0s;
  }

  .circles li:nth-child(6){
      left: 75%;
      width: 110px;
      height: 110px;
      animation-delay: 3s;
  }

  .circles li:nth-child(7){
      left: 35%;
      width: 150px;
      height: 150px;
      animation-delay: 7s;
  }

  .circles li:nth-child(8){
      left: 50%;
      width: 25px;
      height: 25px;
      animation-delay: 15s;
      animation-duration: 45s;
  }

  .circles li:nth-child(9){
      left: 20%;
      width: 15px;
      height: 15px;
      animation-delay: 2s;
      animation-duration: 35s;
  }

  .circles li:nth-child(10){
      left: 85%;
      width: 150px;
      height: 150px;
      animation-delay: 0s;
      animation-duration: 11s;
  }



  @keyframes animate {

      0%{
          transform: translateY(0) rotate(0deg);
          opacity: 1;
          border-radius: 0;
      }

      100%{
          transform: translateY(-1000px) rotate(720deg);
          opacity: 0;
          border-radius: 50%;
      }

  }