@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
    margin:0;
    padding:0;
}
.containers{
    min-height:80vh;
    background-color:#c7a7fa;
    display:flex;
    justify-content:center;
    align-items:center;
}
.card{
   
} 
.main{
    display:none;
    height:720px;
    width:420px;
    background-color:#fff;
    border-radius:10px;
    padding:20px;
    box-sizing:border-box; 
    cursor:pointer;
    font-family: 'Poppins', sans-serif;
    animation: animate 0.5s;
}
.active{
    display:block !important;
}
.image{
    display:flex;
    justify-content:center;
    align-items:center;
    
}
.image span{
    height:70px;
    width:70px;
    border:1px solid #86b0da;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    overflow:hidden;
}
.image span img{
    width:90%;
    object-fit:cover;
 
}
.heading{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin-top:20px;
}
.heading h3{
    font-size:18px;
}
.heading p{
    font-size:13px;
    font-weight:700;
}
.heading p a{
    text-decoration:none;
    color:blue;
}
.input-text{
   position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    padding:0 20px;
}
input[type="text"]{
    height:35px;
    width:100%;
    border-radius:20px;
    padding:0 20px;
    border:none;
    outline:0;
    background-color:#f3f3f3;
}

.buttonlarge{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    padding:0 20px;
    gap:10px;
}
.buttonlarge button{
     height:35px;
    width:100%;
    border-radius:20px;
    /*margin:0 20px;*/
     border:none;
    outline:0;
    //background-color:#0166cc;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}




.button{
    display:flex;
    justify-content:center;
    align-items:center;
    //margin-top:20px;
    //padding:0 20px;
    gap:10px;
}
.button button{
    //height:35px;
    //width:100%;
    border-radius:20px;
    /*margin:0 20px;*/
     border:none;
    outline:0;
    //background-color:#0166cc;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}

.button a{
     //height:35px;
    //width:100%;
    border-radius:20px;
    /*margin:0 20px;*/
     border:none;
    outline:0;
    //background-color:#0166cc;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}

.alarge{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    padding:0 20px;
    gap:10px;
}
.alarge a{
     height:35px;
    width:100%;
    border-radius:20px;
    /*margin:0 20px;*/
     border:none;
    outline:0;
    color:#fff;
    font-size:12px;
    cursor:pointer;
}
input[type="password"]{
    height:35px;
    width:100%;
    border-radius:20px;
    padding:0 20px;
    padding-right:22px;
    border:none;
    outline:0;
    background-color:#f3f3f3;
     border:1px solid #f3f3f3;
  
}

.fa-eye-slash{
    position:absolute;
    right:27px;
    top:13px;
    font-size:13px;
}
.fa-eye{
    position:absolute;
    right:27px;
    top:13px;
    font-size:13px;
}
.warning{
    border:1px solid red !important;
}
.final-step{

    text-align:center;
}
.final-step p{
    margin-top:20px;
    font-size:13px;
    font-weight:700;
    padding:0 20px;
} 
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
} 

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

.table-hover > tbody > tr:hover > * {
    background-color: #fff;
}