*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
        
body{
  font-family: "Open Sans", sans-serif;
  font-family: 'Ubuntu', sans-serif;
}

.header{
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #1E293B;
  background-color: black;
}

.header .container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.header .container h1{
  color: white;
  font-weight: bold;
  line-height: 60px;
}
.header .container button{
  border: 1px solid #1E293B;
  color: white;
  margin-top: 10px;
}



.main_box{
  width: 40%;
  padding: 25px;
  border: 1px solid #1E293B;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 16px;
  background: black;
}

.main_box h3{
  color: #F8FAFC;
}

.main_box p{
  color: #94A3b8;
}

.first_form{
  width: 400px;
  padding: 25px;
  margin: auto;
  margin-top: 10px;
}
.first_form label{
  color: #94A3b8;
  margin-bottom: 5px;
}
.first_form input{
  background: black;
  color: #94A3b8;
  width: 100%;
}


.first_form input:hover{
  background: black;
}

.first_form button{
  width: 100%;
  margin-top: 20px;
}

.second_form{
  width: 100%;
  /*padding: 15px;*/
  margin-top: 30px;
  display: none;
}

.second_form label{
  color: #94A3b8;
  margin-bottom: 5px;
}
.second_form input{
  background: black;
  color: #94A3b8;
}

.second_form input:hover{
  background: black;
}

.second_form button{
  width: 100%;
  margin-top: 20px;
}
.othertext{
  display: none;
}

#spinnerbox{
    display: none;
}
#spinner{
    animation: spin 1s linear infinite;
}
@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

#spinnerbox2{
    display: none;
}
#spinner2{
    animation: spin2 1s linear infinite;
}
@keyframes spin2{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

#email_valid_msg{
  display: none;
}

.thirdform{
  width: 100%;
  /*padding: 15px;*/
  margin-top: 30px;
  display: none;
  background: black;
}

.otp_box{
    display: flex;
    gap: 10px;
}
.otp_input{
    width: 45px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #1E293B;
    border-radius: 12px;
}

.thirdform label{
  color: #94A3b8;
  margin-bottom: 5px;
}
.thirdform input{
  background: black;
  color: #94A3b8;
}

.thirdform input:hover{
  background: black;
}

.thirdform button{
  width: 100%;
  margin-top: 20px;
}

#privacytext a{
    color: white;
}


/*welcome div style*/

.welcome{
  width: 40%;
  padding: 25px;
  border: 1px solid #1E293B;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 16px;
  background: black;
  display: none;
}

.welcome h3{
  color: #F8FAFC;
}

.welcome p{
  color: #94A3b8;
}
.welcome label{
    color: #94A3b8;
}
.welcome input{
    background: black;
    border-color: #94A3b8;
}

.welcome button{
    width: 100%;
    margin-top: 20px;
    display: none;
    margin-top: -10px;
}

#spinnerboxforusername{
    display: none;
}
#saving_username{
    animation: spin3 1s linear infinite;
}
@keyframes spin3{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}


/*password saving*/

.password{
  width: 40%;
  padding: 25px;
  border: 1px solid #1E293B;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 16px;
  background: black;
  display: none;
}

.password h3{
  color: #F8FAFC;
}

.password p{
  color: #94A3b8;
}
.password label{
    color: #94A3b8;
}
.password input{
    background: black;
    border-color: #94A3b8;
}

.password button{
    width: 100%;
    margin-top: 20px;
}

#spinnerboxforpassword{
    display: none;
}
#passwordsaving{
    animation: spin4 1s linear infinite;
}
@keyframes spin4{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

.allsetmsg{
  width: 40%;
  padding: 25px;
  border: 1px solid #1E293B;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 16px;
  background: black;
  display: none;
}
.allsetmsg h3{
  color: #F8FAFC;
}

.allsetmsg p{
  color: #94A3b8;
}

@media(max-width: 648px){
    .main_box{
        width: 95%;
    }
    .first_form{
        width: 100%;
    }
    .welcome{
        width: 95%;
    }
    .password{
        width: 95%;
    }
    .allsetmsg{
        width: 95%;
    }
    #privacytext{
        font-size: 12px;
    }
}