:root{
    --primarycolor:rgb(9, 9, 36);
    --secondarycolor:#a9a9a9;
    --btncolor1:#b4b4f6;
    --tetiarycolor: #ffffff;
}

.form-container{
    width: 60%;
    background-color: white;
    margin: 10vh auto;
    box-shadow: 0px 10px 20px  rgba(0, 0, 0,0.1);
    border-radius: 20px;
}
.form-container h2{
    color: var(--primarycolor);
    margin:2% 9%;
    font-size: 3.5rem;
}
form{
    width: 150%;
    margin: 2% auto;
    padding-top:5%;
    padding-bottom:5%;
}
label{
    display: inline-block;
    width:30%;
    margin-top:5%;
    font-size: 1.1rem;
    color:goldenrod
}
input{
    position: relative;
    width:60%;
    min-height:5.5vh;
    font-size: 1.2rem;
    color: var(--primarycolor);
    padding-left: 4%;
    border: 1px solid goldenrod;
    border-radius: 5px;
}

select{
    width: 30%;
    height:4vh;
    text-align: center;
    border: none;
    border-radius: 5px;
    outline: none;
 

}
.checkbox-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
     flex-direction: row;  
    gap:0;   
  }
#checkbox-label{
    width: 100%;
    font-size: 1rem;
    margin-top: 5%;
    color: var(--primarycolor);
    font-weight: 500;
  
  }

  .checkbox-container input{
    position: relative;
    width: 4%;
     padding: 1%;
      margin-right: 9%;
      margin-top: 5%;
      background-color: #a9a9a9;
  }
  

.submit-container{
    width: 50%;
    /* margin: 0 auto; */
}


#submit-btn{
    width: 50%;
    font-size: 1.3rem;
    background-color: goldenrod;
    margin:20% auto;
    font-weight: bold;
    cursor: pointer;
}
#submit-btn:hover{
 background-color: var(--primarycolor);
 color: var(--secondarycolor);
}

/* Error form handling */
.firstname-error{
    left: 41%;
    color: red;
}
.lastname-error{
    left: 41%;
    color: red;
}
.emailerror{
    left: 41%;
    color: red;
}
.phoneerror{
    left: 41%;
    color: red;
}
.stateerror{
    left: 41%;
    color: red;
}
.lgaerror{
    left: 41%;
    color: red;
}
.passworderror{
    left: 41%;
    color: red;
}
.passworderror2{
    left: 41%;
    color: red;
}
.checkboxerror{
    right: 41%;
    color: red;
  
}
.terms{
    margin-top: 4.5%;
    color: white;
}
.terms a{
    color: white;
  
}
.failure{
    border: 2px solid red;
  }
  .success{
    border: 2px solid rgb(0, 255, 60);
  }



/* .......................Mobile Screen sizes...................................... */


/* .......................920px and below............................................ */
@media screen and (max-width:920px){
     .formcontrol{
        width: 100%;
    }
     .form-container{
        width: 90%;
     }
    .checkbox-container input{
            margin-right: 30px;
            width: 12%;
        }
        label{
        font-size: 1rem;
        width: 30%;
    }
       
    .formcontrol label{
        font-size: 1rem;
        
    }
    input{
        width:65%;
       height:5vh;  
    }
     .checkbox-container input{
    position: relative;
    width: 6%;
     }

    
}
/* .......................723px and below............................................ */
@media screen and (max-width:723px){
    /* .login{
        margin-top: -4px; 
       
    }

    .login li a{
        font-size: 1.2rem;
        padding-right: 10px; 
    } */
    /* .smlscreen-navlist li a{
        font-size: 1.1rem;
    } */
    .formcontrol{
        width: 100%;
    }
     .form-container{
        width: 90%;
     }
    .form-container h2{
        font-size: 2.5rem;
    }
    /* .smlscreen-navlist li a{
        padding-bottom: -2%;
        font-size: 0.9rem;
    } */
  
    label{
        font-size: 1rem;
        width: 30%;
    }
       
    .formcontrol label{
        font-size: 1rem;
    }
    input{
        width:65%;
       height:5vh;  
    }
    .checkbox-container input{
    position: relative;
    width: 6%;
     }
}


/* .......................600px and below............................................ */
@media screen and (max-width:600px){
    .form-container{
        width: 85%;
    }
    label{
        display: block;
        width:50%;
        margin-top:5%;
        font-size: 1.1rem;

    }
    input{
        position: relative;
        width:85%;
        height:5.5vh;
        font-size: 1.2rem;
        padding-left: 4%;
        border-radius: 5px;
    }
    
select{
    width: 60%;
    height:4vh;
    text-align: center;
    border: none;
    border-radius: 5px;
    outline: none;
 

}
#submit-btn{
    width: 50%;
    font-size: 1.1rem;
    margin:20% auto;
}
.formcontrol{
    width: 100%;
  
}
.formcontrol label{
    font-size: 1rem;
}
input{
    width:100%;
   height:5vh;  
}
    .checkbox-container input{
    position: relative;
    width: 6%;
     }
     #checkbox-label{
        width: 100%;
        font-size: 0.9rem;
        margin-top: 5%;
        color: var(--primarycolor);
        font-weight: 500;
      
      }
    

}

/* .......................470px and below............................................ */

/* .......................470px and below............................................ */
@media screen and (max-width:470px){
    .form-container{
        width: 85%;
    }
  
    .form-container h2{
        font-size: 2rem;
    }
   
    
    .formcontrol{
        width: 100%;
      
    }
    .formcontrol label{
        font-size: 1rem;
    }
    input{
        width:100%;
       height:5vh;  
    }
    #submit-btn{
        width: 60%;
        font-size: 1rem;
        margin:20% auto;
    }
   

}

/* .......................380px and below............................................ */
@media screen and (max-width:380px){
    #submit-btn{
        width: 65%;
        font-size: 1rem;
        margin:20% auto;
    }
}