.otp_verification{
     border-top-left-radius: 25px; 
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px; 
    padding-bottom: 20px;
    width: 70%; 
    border: solid 1px #ECF3F5;
    box-shadow: 10px 10px 10px 10px #ECF3F5;
   
    background: white;
    left:31.5%;
    top:35%;
    display: none;
}

.power-container {
    background-color: #4B6B7D;
    width: 355px;
    height: 15px;
    border-radius: 5px;
    margin-top:4px;
    display:none;
}

#power-point {
    background-color: #D73F40;
    width: 1%;
    height: 100%;
    border-radius: 5px;
    transition: 0.5s;
}


.loading span {
    position: absolute;
    height: 10px;
    width: 84px;
    top: 50px;
    overflow: hidden;
}
.loading span > i {
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    -webkit-animation: wait 4s infinite;
    -moz-animation: wait 4s infinite;
    -o-animation: wait 4s infinite;
    animation: wait 4s infinite;
}
.loading span > i:nth-of-type(1) {
    left: -28px;
    background: yellow;
}
.loading span > i:nth-of-type(2) {
    left: -21px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    background: lightgreen;
    
}

@-webkit-keyframes wait {
    0%   { left: -7px  }
    30%  { left: 52px  }
    60%  { left: 22px  }
    100% { left: 100px }
}
@-moz-keyframes wait {
    0%   { left: -7px  }
    30%  { left: 52px  }
    60%  { left: 22px  }
    100% { left: 100px }
}
@-o-keyframes wait {
    0%   { left: -7px  }
    30%  { left: 52px  }
    60%  { left: 22px  }
    100% { left: 100px }
}
@keyframes wait {
    0%   { left: -7px  }
    30%  { left: 52px  }
    60%  { left: 22px  }
    100% { left: 100px }
}


.register_succsss_btn{
    transition-duration: 0.4s;
    cursor: pointer;
    width:100px; height:40px; border-radius: 5px; border:none; background: #8BC349;
    color: white; font-family: sans-serif; font-size: 18px;
}
.register_succsss_btn:hover{
    cursor: pointer;
    background: #689136;
}

.register_failure_btn{
    transition-duration: 0.4s;
    cursor: pointer;
    width:100px; height:40px; border-radius: 5px; border:none; background: #FF4A2C;
    color: white; font-family: sans-serif; font-size: 18px;
}
.register_failure_btn:hover{
    cursor: pointer;
    background: #D13D24;
}

.account_exists_btn{
    transition-duration: 0.4s;
    cursor: pointer;
    width:100px; height:40px; border-radius: 5px; border:none; background: #FFC90E;
    color: white; font-family: sans-serif; font-size: 18px;
}
.account_exists_btn:hover{
    cursor: pointer;
    background: #CCA10B;
}

#email_otp::placeholder{
    font-size: 15px;
    padding-left: 16px;
    
}

#resend_otp:hover{
    cursor: pointer;
}

.registerbox{
    margin-top:5px;background-color: white; 
    border-top-left-radius: 25px; border-top-right-radius: 25px; 
    width:80%;margin-right: 5px; padding-bottom: 70px;
    border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;
}

.registerbox-table{
    width:80%;
}


.register-form-box{
   border-radius: 25px;    
   padding-bottom: 20px;
   max-width: 70%;
   width: 100%;
   border: solid 1px #ECF3F5;
   box-shadow: 10px 10px 10px 10px #ECF3F5;    
   background: white;
   display: block; 
}

.reg-form-titles{
    font-family: sans-serif; color:#359DC9; font-size: 16px; padding-left: 18px;width:30%;
}

.reg-form-btn{
    padding-left: 40px;padding-top:15px;
}

.success_message_div{
    background-color: white; width:400px; 
    height:300px; vertical-align: middle; 
    
    top:35%;left:39%; 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; z-index: 5;
   
    border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;display:none;margin-top: 30px;
    border: 1px solid lightgray;
}

.account_exists_div{
    background-color: white; width:400px; height:350px; vertical-align: middle;  top:35%;left:39%; border-top-left-radius: 25px; 
    border-top-right-radius: 25px; z-index: 5;
    border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;display:none;margin-top: 30px;
    border: 1px solid lightgray;
}

.failure_reg_message_div{
    background-color: white; width:400px; height:300px; vertical-align: middle;  top:35%;left:39%; border-top-left-radius: 25px; 
    border-top-right-radius: 25px; z-index: 5;
    border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;display:none;margin-top: 30px;
    border: 1px solid lightgray;
}
@media screen and (max-width: 849px) {
    .registerbox{
        max-width: 100%;
        width:100%;
        border-radius: 0px;
    }
    
    .registerbox-table{
       max-width: 100%;
        width:100%;
       
    }
    
    .register-form-box{
        max-width: 100%;
        width: 100%;
        border-radius: 0px;
        box-shadow:none;
        border:none;
    }
    .register-fields-table{
         display: grid;
        grid-template-columns: 1fr; 
    }
    .register-fields-table td{
        display: block; /* Make each cell a block element */
        text-align: left;
        padding-left: 0px;
        width:100%;   
        padding-top: 5px;
    }
    .reg-form-btn{
        padding-left: 20px;
    }
    .reg-form-btn input{
        max-width: 100%;
        width:95%;
        border-radius: 0px;
        height:50px;
    }
    
    .otp_verification{
        max-width: 100%;
        width:100%;
        left:0;
        border-radius: 0px;
        box-shadow:none;
        border:none;
        
    }
    
    .success_message_div{                      
        max-width: 100%;
        width:100%;
        left:0;
        border:0px;
     
    }
    
    .account_exists_div{
        max-width: 100%;
        width:100%;
        left:0;border:0px;
    }
    
    .failure_reg_message_div{
        max-width: 100%;
        width:100%;
        left:0;border:0px;
    }
    .loading span{
        display: none;
    }
}