.extraNewUserInput{
  width:fit-content;
}
.panelHeader{
    background-color: #193E68;
    padding: 15px 30px;
    font-size:18px;
}
.panel{
  background-color: #F8F8F8;
  height:auto;
  width: auto;
}
.panel-title{
    color:white;
}

.idSelectn{
   width: 200px;
   border-width: 0.02px;
 }
.idSelectn, #inputId{
  width: 300px;
  height: 34px;
  border: 1px solid #7f7f7f;
  color: #7f7f7f;
  overflow: hidden;
  padding-left: 10px;
}
#dob{
  width: 300px;
  height: 34px;
  border: 1px solid #7f7f7f;
  color: #7f7f7f;
  overflow: hidden;
  padding-left: 10px;
}
#dob{
 top: -34px;
 padding-left: 30px;/*test*/
}

.idVerifyform{
  padding-top: 10px;
  text-align: center;
}

/* instruction notes*/
#instrNote{
  font-weight: bold;
  left: 220px;
}

#hideText, #showText{
  position: relative;
  left:140px;
  top:4px;
  z-index: 900;
}

#person_icon{
  display: none;
  position: relative;
  right: 255px;
  top: 4px;
  z-index: 999;
}
/* for hiding and showing Confirm Password text*/
#hideCPText, #showCPText{
  position: relative;
  left:220px;
  top:4px;
  z-index: 900;
}

#showCPText{
  visibility: hidden;
  position: relative;
  left:190px;
  z-index: 900;
}


/* for hiding and showing Password text*/
#hidePText, #showPText{
  position: relative;
  left:220px;
  top:4px;
  z-index: 900;
}

#showPText{
  visibility: hidden;
  position: relative;
  left:190px;
  z-index: 900;
}

.imgs{
  height:0px;
}

#showText{
  visibility: hidden;
  position: relative;
  left:110px;
  z-index: 900;
}

.panel2{
  height: auto;
  box-sizing: border-box;
  width:700px;
  background: #F8F8F8;
  left: 100px;
  position: relative;
}

.q3Options, .q1Options, .q2Options,#inputQ3Id.form-control, #inputQ1Id.form-control,#inputQ2Id.form-control,#firstNameId.form-control,
#lastNameId.form-control, .firstName, .lastName, #usernameId.form-control, #emailId, #paswdId, #cpaswdId{
  align-content: center;
  width: 250px;
  height: 34px;
  border-color: #DCDCDC;
}

.q3Options, .q1Options, .q2Options,#inputQ3Id.form-control, #inputQ1Id.form-control,#inputQ2Id.form-control{
  position: relative;
  left: 50px;
  right:0px;
}

#firstNameId.form-control, #lastNameId.form-control, .firstName, .lastName, #usernameId.form-control{
  left:40px;
  
}

@media only screen and (max-width: 700px)
{
  .panel2
  {
    width: fit-content;
    left: 0px;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1024px)
{
  @media (orientation: portrait) 
  {
      .panel2
    {
      left: -80px;
    }
    }
    @media (orientation: landscape) {
      .panel2
    {
      left: -80px;
    }
  }
  
}
@media only screen and (min-width: 1400px)
{
  .panel2
  {
    height: auto;
    box-sizing: border-box;
    width:700px;
    background: #F8F8F8;
    left: 100px;
    position: relative;
  }
}

#isn_header_logo{
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#cancelSignUp, #subIdCheck{
  width: 100px;
  height: 44px;
  background-color: #dff2f9;
  border: 1px solid #0099cc !important;
  color:#0099cc;
}
#cancelSignUp:hover, #cancelSignUp:focus, #subIdCheck:hover, #subIdCheck:focus{
  background-color: #193e68;
  color:white;
}

#userInfo{
  padding-left: 67px;
  padding-right: 80px;
}
#secInstr1, #secInstr2, #secInstr3, #userInfoId, #loginInstrc, #phoneInstrcId{
    width:200px;
    height: 10px;
    font-weight: bold;
    position: relative;
}
#secInstr1, #secInstr2, #secInstr3{
  left: 30px;
}

.instrct{
  font-weight: bold;
  font-size: 13px;
  padding-left: 20px;
  padding-top: 15px;
}

.instrctUserInput{
  font-weight: bold;
  font-size: 13px;
  padding-top: 15px;
}
#finishSignUpStep{
  padding-left: 120px;
  padding-top: 40px;
  left:20%;
  position: relative;
}

#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 10px;
  left:50px;
  width:fit-content;
}
#message p {
  font-size: 12px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before{
  position: relative;
  left: -15px;
  content:  "\2713";
}

.msg_container{
  background: #f1f1f1;
  width: 300px;
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}
#countryCode.col-md-4 , #phoneCode.col-md-4
{
  padding-left: 0px;
  padding-right: 0px;
}
#ccode
{
  font-weight: lighter;
  width: 250px;
  display: none;
}
.loginInstrc{
  width:200px;
  height: 10px;
  font-size:small;
  font-weight: bold;
  padding-top: 1em;
  padding-bottom: 1em;
}

#emailInstrct.loginInstrc{
  padding-top:5em;
}
#phoneNumInputId{
  width:250px;
  padding-right:0px;
  height: 34px;
  font-weight: 100;
  align-items: center;
}
.invalid:before{
  position: relative;
  left: -15px;
  content: "x";
}

.usrQ1newQ, .usrQ2newQ, .usrQ3newQ{
  display: none;
}
#usernamemsg, #usrNameFormat{
  display:none;
  font-size: 9px;
  position: relative;
}
#passwordmsg
{
  display:none;
  font-size: 9px;
  position: relative;
  padding-bottom: 0px;
}

#phonemsg
{
  display:none;
  font-size: 9px;
  position: relative;
  bottom: -75px;
  padding-bottom: 0px;
}
#emailmsg
{
  display:none;
  font-size: 9px;
  position: relative;
  padding-bottom: 0px;
}
/* related to the Country code */
.iti-flag {background-image: url("flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.iti-flag {background-image: url("flags@2x.png");}
}

#phonenstr.invalid,#BTNCANCEL
{
  display: none;
}

@media(min-width: 1025px) and (max-width: 1440px){
  #idmsg{
    padding-left: 120px;
  }
}

@media(min-width: 769px) and (max-width: 1024px){
  #idmsg{
    padding-left: 35px;
  }
}