.login-content h3{
    font-weight: 600;
    text-shadow: 2px 2px 4px #888;
    font-size: 35px;
}
.login-content p{
    font-weight: 600;
    text-shadow: 2px 2px 4px #FFF;
    color: chocolate;
    font-size: 20px;
}

.auth-desc h3{
    text-align: center;
    padding-top: 20px;
    font-size: 35px;
    font-weight: 600;
    color: #060366;
    font-family: 'Times New Roman', Times, serif;
}
.auth-desc p{
    text-align: center;
}

img.center {
    padding:10px 0px;
    /* display: block;
    margin: 0 auto; */
    float: right;
}
.bg-svg{
    width: 100%;
}
.title{
    font-size: 16px;
}
.label{
    font-weight: 400;
}


.btn-custom{
    height: 50px;

    border-radius:15px;
    background: linear-gradient(0deg, #795548 0%, rgba(253, 187, 45, 1) 100%);
    border: 1px solid #fff;

}
.btn-custom-pink{
    height: 50px;
    margin-top: 15px;
    border-radius:15px;
    background: #8d0532;
    border: 1px solid #fff;

}
.tn-logo-old{
    float: left;
    width:80px;
    padding: 10px;
}
.login-logo{
    width: 200px;
    padding: 20px;
}
.login-top{
    /* background: #fff; */

}
.login-top h3 {
    padding: 35px;
    font-size: 45px;
    text-align: center;
    color: #cc0d4e;
    font-weight: 600;
}
.login-container {
    width: 100%;
    padding: 30px;
}

.btn-custom-terms {
    height: 50px;
    margin-top: 0px;
    border-radius: 15px;
    background: #673ab7;
    border: 1px solid #fff;
    line-height: 2.5;
}
.terms-box{
    background: #fff !important;
    border-radius: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.form-control{
    height: 50px;
}
.logo_outer{
    text-align: center;
    font-weight: 700;
}
.logo_outer img{
    width:200px;
    margin: 10px;

}
.login_oueter{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    border-radius: 20px;
}
.auth-box{
    background:#fff;
    border: 1px solid gray;

  }
  main{
    position: relative;
    z-index: 1;
  }
  .area{
      background: #c09a61;
      background: -webkit-linear-gradient(to left, #8f94fb, #c09a61);
      width: 100%;
      height:100vh;


  }

  .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); */
      background: #12111126;
      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%;
      }

  }

@media(max-width:768px){
    .login_oueter {
        /* margin: 50px auto;
        border-radius: 20px;
        box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;

        margin-top: 10px; */
        padding: 10px !important;

    }
    .login-container {
        width: 100%;
        padding: 10px;
    }
    .tn-logo{

        padding: 10px;
        margin: 0px;
    }
    .auth-head{
        margin: 0px;
        padding: 0px;
    }
    .auth-head .col-md-12{
        margin: 0px;
        padding: 0px;
    }
    .auth-desc h3{
        text-align: left;
        padding-top: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #060366;
        font-family: 'Times New Roman', Times, serif;
    }
    .auth-desc p{
        text-align: left;
        font-size: 11px;
    }
    .title{
        font-size: 14px;
    }

}