/* for log in / sign up screen form */

@media only screen and (max-width: 700px) {
  #tenants, #for, #new_address, #new_tenants, #taNote, #add1 {
    width: 100%;
    margin: auto; 
    vertical-align: middle;
    resize: both;
  }

  #head_logo_before_login  {
    /* margin-left: 1em;  */
    margin: auto;
  }
}  /* max 700 px */ 

@media (min-width:701px) {
  #tenants, #for, #new_address, #new_tenants, #taNote, #add1 {
    width: 85%;
    vertical-align: middle;
    resize: both;
  }

  #head_logo_before_login  {
    /* margin-left: 20%;  */
    /* width: 90%;  */
    margin: auto; 
  }

} /* min 801 px */




/* universial to all screen sizes */ 
.label-confirm {
  /* can delete maybe 2025-2-9*/
  width: 4em;
  display: inline-block;
  text-align: left;
  margin-right: 5px;
  margin-top: 0.5em;
}

.label-login {
  /* can delete maybe 2025-2-9*/
  width: 5em;
  display: inline-block;
  text-align: left;
  margin-right: 0px;
  margin-top: 0.5em;
}

.signupTextInput {
  width: 65%;
  margin: 0.5em;
  margin-bottom: 0.2em; 
  height: 2em; 
}

#LoginDiv, #login-buttons, #reg-buttons {
  border: 3px solid rgb(10, 88, 202);
  padding: 1.2em 0.5em 1.5em 0.5em;
  /* margin: 1em 0px 1.4em 0px; */
  margin: auto; 
  width: 350px;
  text-align: center; 
}

#login-buttons {
  border: none; 
}

/* in login div */
#try_btn, #regis_btn {
  margin: 0 0 0 0.4em;
}

/* bit spacing for all submit button */
.btn {
  margin-left: 0.3em; 
}

#try_btn {
  /* padding-left: 1.7em; 
  padding-right: 1.7em;  */
}

#login_btn:disabled, #RegBtn:disabled {
  background-color: lightgray;
  color: gray;
}

input[type="password"]::-ms-reveal {  /* remove bult-in eye, as only appear 1st time on shit edge shit, hf fucking shit working */ 
  display: none;
}

#imgUserNameok {
  margin-left: -11px;  /* this doesn't have password toggle, so remain same -8 */ 
  margin-top: -5px; 
}

#imgPasswordOK, #imgPassword2OK {
  margin-left: 2px;  /* changed after adding the password toggle eyes */ 
  margin-top: -5px; 
}

.pw_tips {  /* for password tip */
  text-align: left;
  margin-left: 10%;
}

.valid {  /* met requirement */
  color: green;
}

.invalid { /* not met requirement */
  color: red;
}

/* out box for sign up */ 
#divSignUpForm {
  margin: auto; 
  width: 350px;

  text-align: center; 
  /* 400 is full width on blu android phone */
}

/* inner box for sign up */ 
#RegisterDiv {
  border: 3px solid rgb(10, 88, 202);
  padding: 1.2em 0.5em 1.4em 0.5em;
  margin: 0em 0em 1em 0em; 
  display: flex;   /* line up vertically */ 
}

.toggle_eye {  /* for log in, sign in */ 
  margin-left: -2em;  /* move the eye insde the text box */ 
  margin-top: 0.8em; 
  width: 15px; /* make it smaller */ 
  display: none; 
}

.toggle_eye2 {  /* for register, sing up */
  margin-left: -2em;  /* move the eye insde the text box */ 
  margin-top: -0.3em; 
  width: 15px; /* make it smaller */ 
  display: none; 
}


#id_user, #id_pass { /* for log in, sign in */ 
  margin: 5px;
  font-weight: 600;
  /* width: 60%; */  /* not working well with horizontal align, may fix later 2026-4-6 when figure out  */.
}

#div_username_input, #div_password_input {  /* contain pw label and pw input */ 
  display: flex; 
}

#show_pass1, #hide_pass1 {
  /* display: none;  */
}

#id_signup_new_user, #id_signup_new_pass {
  /* margin: 5px;  */
  /* font-weight: 600; */
  /* width: 60%;  */
}

#id_pw_tips, #id_pw_match_tip {
  display: none;
  margin: 0 auto;
  width: 100%;
  margin: 3px 1px -0.5em 2.5em;

  line-height: 1.3em; 
}

/* .pw1_requirements1 {
  line-height: 1.3em; 
  margin-bottom: 0em 0em 0em 1em; 
} */


/* introduced detail confirm to reg, for demo 2026-3-14 */
#details_container {
  display: none;
  width: 90%;
  margin: auto; 
}

#details_div_card {
  /* start up hide */
  border: 3px solid rgb(10, 88, 202);
  padding: 0px 0px 0px 0px;
  margin: 0.5em 0px 1em 0px;
}

#confirm_card-header {
  /* background-color: rgb(10, 88, 202);  */
  /* background-color: #0a58ca; */
  background-color: rgb(10, 108, 222);
  color: white;
  font-weight: 600;
  border-radius: 0;
}

.input1 {
  background-color: rgba(255, 255, 192, 1);
  margin-top: 5px;
}

#hidden_fields {  /* hide 7 fields, used to hold values to post */ 
  display: none; 
}

/* will make the logo stick to the menu, default is flex, spent hours */ 
#menu2 {
  /* display: block; */
}

.navbar-collapse {  /* the dropdown 1st item was too close to the parent 3 bar */ 
  margin-top: 0.8em; 
}

/* finish detail confirm screen for try out */


/* for SEO */ 
h1 {
  display: none;
}


#div_video {  /* outer wrapper for video */
  /* display: none;  */ 
  width: 100%; 
  margin: auto; 
  text-align:center;
  margin-bottom: 10em; 
}

#video_demo { /* the video itself */ 
  display: block; 
  text-align:center;
  margin-top:-0.2em; 
  margin:-.4em auto 0 auto ; 
  text-align:center;
  opacity: 0.3; 
  width: 300px; 
  border: 1px solid rgb(10, 88, 202);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;

}



.rainbow-text {
  font-size: 1.5em;
  font-family: cursive; 
  font-style: italic; 
  
  background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
  -webkit-background-clip: text;
  display: inline-block;  /* this is needed for rainbow */ 

  margin-bottom: 0.2em;
}

.rainbow-text:nth-of-type(2) {
   background-image: radial-gradient(circle, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text:nth-of-type(3) {
   background-image: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red);
 color: transparent;
}

.rainbow-text-loop {
  font-size: 1.5rem;
  display: inline-block;
  margin-top: 1rem;
  text-shadow: 2px 2px 4px #000000;
  -webkit-animation: rainbow 5s infinite; 
}

@-webkit-keyframes rainbow{
  0%{color: orange;}  
  10%{color: purple;} 
  20%{color: red;}
  30%{color: CadetBlue;}
  40%{color: yellow;}
  50%{color: coral;}
  60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
  100%{color: orange;}
}


.rainbow-text-shadow {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 1.5rem;
  font-weight: 100;
  color: #ef3550;
  letter-spacing: 8px;
  text-shadow: 1px 0 #f48fb1, 2px 0 #7e57c2, 3px 0 #2196f3, 4px 0 #26c6da, 5px 0 #43a047, 6px 0 #eeff41, 7px 0 #f9a825, 8px 0 #ff5722, -1px 0 #f48fb1, -2px 0 #7e57c2, -3px 0 #2196f3, -4px 0 #26c6da, -5px 0 #43a047, -6px 0 #eeff41, -7px 0 #f9a825, -8px 0 #ff5722;
}