/* 
                              General styles
*/

textarea,
input {
  letter-spacing: 1.2px !important;
  background-color: transparent;
  transition: color .5s;
}

textarea:focus,
input:focus {
  border-color: var(--input-border-focus) !important;
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

::placeholder {
  color: transparent;
}

/* 
                              Visibility Eye
*/

#reset_form .pw_icon,
#login_form .pw_icon,
#signup_form .pw_icon {
  position: absolute;
  font-size: 16px;
  z-index: 200;
  top: 15%;
  right: 20px;
  cursor: pointer;
  color: var(--text-color);
  opacity: .8;
  z-index: 0;
}


#reset_form input[type="password"]::-ms-reveal,
#login_form input[type="password"]::-ms-reveal,
#signup_form input[type="password"]::-ms-reveal {
  display: none;
}

/* 
                              Code Input Section (4-digits)
*/

#txt_code_input,
#codeInputBox {
  width: 102px;
  margin: 30px auto 20px;
}

.needCode #codeInputBox {
  display: block;
}

#txt_code_input input,
#codeInputBox input {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 5px !important;
  height: 30px;
  font-family: roboto;
}


/* .code.flex {
  display: flex;
}

.code.block {
  display: block;
} */


/* 
                              Moving placeholder
*/

.inputBox {
  position: relative;
  width: 100%;
  margin: 25px 0px 20px;
}

.inputBox textarea,
.inputBox input {
  border: none;
  border-bottom: 2px solid var(--input-borders);
  width: 100%;
  padding: 0px 12px;
  font: inherit;
  font-size: 17px;
  color: var(--input-text);
  outline: none;
  font-weight: 500;
}

#email_form .inputBox textarea {
  border: 2px solid var(--input-borders);
  border-radius: 7px;
  top: 20px;
  background-color: transparent;
}

.inputBox span {
  position: absolute;
  top: -3px;
}

.inputBox textarea~span {
  background-color: #E4EBF0;
  /* background-color: red; */
  line-height: .5;
}

.dark .inputBox textarea~span {
  background-color: #0F1C27;
}


.inputBox textarea~span,
.inputBox input~span {
  position: absolute;
  color: var(--placeholder-color);
  padding: 5px 8px;
  transition: .3s;
  left: 5px;
  pointer-events: none;
  letter-spacing: 3px;
  font-size: 17px;
}

.inputBox textarea:placeholder-shown~span {
  top: 10px;
  font-size: 17px;
}

#txt_code_input input~span,
#codeInputBox input~span {
  left: 5px;
  font-size: 21px;
}

.error-msg {
  color: var(--err-msg-color) !important;
}


.inputBox textarea:not(:placeholder-shown)~span,
.inputBox textarea:focus~span,
.inputBox input:not(:placeholder-shown)~span,
#codeInputBox input:focus~span,
#codeInputBox input:not(:placeholder-shown)~span,
#txt_code_input input:focus~span,
#txt_code_input input:not(:placeholder-shown)~span,
.inputBox input:focus~span {
  letter-spacing: 2px;
  font-size: 11px;
  top: -24px;
  color: var(--label-color);
  /* background-color: red; */
}

.inputBox textarea:not(:placeholder-shown)~span,
.inputBox textarea:focus~span {
  top: -11px;
  color: var(--label-color)
}

/* .inputBox textarea:focus~span,
.inputBox textarea:not(:placeholder-shown)~span {
  top: -30px;
} */


.inputBox textarea:focus~span,
.inputBox input:focus~span {
  color: var(--bluish-label) !important;
}

.inputBox textarea.error~span,
.inputBox input.error~span,
#txt_code_input input.error~span,
#codeInputBox input.error~span {
  color: var(--error-span);
}

.inputBox textarea.error,
.inputBox input.error {
  border-color: var(--error-border) !important;
}

@media screen and (max-width: 330px) {
  /* 
                                General styles
  */

  textarea,
  input {
    letter-spacing: 0.364vw !important;
  }


  /* 
                                Visibility Eye
  */

  #reset_form .pw_icon,
  #login_form .pw_icon,
  #signup_form .pw_icon {
    top: 15%;
    right: 5vw;
    font-size: 4.848vw;
  }

  /* 
                                Code Input (4-digits)
  */

  #txt_code_input,
  #codeInputBox {
    width: 30.909vw;
    /* margin: 7.576vw auto 3.03vw; */
    margin: 7.576vw auto 5.714vw;
  }

  #txt_code_input input,
  #codeInputBox input {
    font-size: 6.97vw;
    letter-spacing: 1.515vw !important;
    height: 9.091vw;
  }

  /* 
                                Moving placeholder
  */

  .inputBox {
    margin: 7.576vw 0 6.061vw;
  }

  .inputBox textarea,
  .inputBox input {
    border-bottom: 0.606vw solid var(--input-borders);
    padding: 0 3.636vw;
    font-size: 5.152vw;
  }

  .inputBox span {
    position: absolute;
    top: -0.909vw;
  }

  .inputBox textarea~span,
  .inputBox input~span {
    position: absolute;
    color: var(--placeholder-color);
    padding: 1.515vw 2.424vw;
    transition: .3s;
  }

  #txt_code_input input~span,
  #codeInputBox input~span {
    left: 1.515vw;
    font-size: 5.714vw;
  }

  .inputBox textarea:placeholder-shown~span,
  .inputBox input:placeholder-shown~span {
    font-size: 4.848vw;
    /* top: 8px; */
    pointer-events: none;
    color: #999;
    letter-spacing: 0.909vw;
  }

  /* .dark .inputBox input:placeholder-shown~span {
    color: #333;
  } */

  .inputBox textarea:not(:placeholder-shown)~span,
  .inputBox input:not(:placeholder-shown)~span,
  .inputBox textarea:focus~span,
  #txt_code_input input:focus~span,
  #codeInputBox input:focus~span,
  .inputBox input:focus~span {
    letter-spacing: 0.606vw;
    font-size: 3.333vw;
    top: -7.273vw;
    color: var(--label-color);
  }

  .inputBox textarea:not(:placeholder-shown)~span,
  .inputBox textarea:focus~span {
    top: -3.333vw;
  }
}