html,body {
    margin: 0px;
    padding: 0px;
    width: 100%;
}
body{
    color: rgb(38, 38, 38);
    font-size: 16px;
    font-family: "Inter Display", sans-serif;
    font-weight: 400;
    background-color: white;
    touch-action: manipulation;
}
.the_flex{
    display: flex;
}
.tipuli_main_body_in{
    justify-content: space-evenly;
    align-items: center;
}
.tipuli_main_body_in_left{
    width: 40%;
    display: flex;
    align-items: center;
    height: 100vh;
    padding-left: 34px;
}
.tipuli_main_body_in_left img{
    max-width: 80%;
    object-fit: contain;
    height: 90%;
}
.tipuli_main_body_in_right{
    width:60%;
    justify-content: center;
    align-items: center;
}
.tipuli_main_body_in_right_in{
    max-width:475px;
    padding:48px;
    box-sizing: border-box;
}
.t_m_b_in_r_logo,.t_m_b_in_r_title,.t_m_b_in_r_title_a{
    text-align: center;
}
.the_log_form_input_in{
    font-size: 0.875rem;
    line-height: 1.4375em;
    font-weight: 400;
    color: rgb(38, 38, 38);
    box-sizing: border-box;
    cursor: text;
    padding-left: 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 100%;
    justify-content: left;
    align-items: center;
}
.the_log_form_input_in_img{
    width:16px;
    height:16px;
}
.the_log_form_input_in_input input{
    color: currentcolor;
    border: 0px;
    background: transparent;
    height: 1.4375em;
    margin: 0px;
    width: 100%;
    padding: 10.5px 14px 10.5px 12px;
    outline: none;
}
.top_title{
     color: rgb(140, 140, 140);
    line-height: 1.4375em;
    font-weight: 400;
    position: relative;
    display: block;
    transform-origin: left top;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 13px;
    padding: 0px;
    white-space: nowrap;
    overflow: hidden;
    transition: color 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1), max-width 200ms cubic-bezier(0, 0, 0.2, 1);
}
.the_log_form_input_forget{
    position: relative;
    background-color: transparent;
    outline: 0px;
    border: 0px;
    margin: 0.4rem 0px 0px auto;
    cursor: pointer;
    font-size: 14px;
    color: rgb(24, 160, 180);
    font-weight: 500;
    text-align: right;
}
.the_log_in_but{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-transform: capitalize;
    font-size: 0.9375rem;
    line-height: 1.75;
    min-width: 64px;
    width: 100%;
    box-shadow: none;
    font-weight: 400;
    min-height: 40px;
    background-color: rgb(24, 160, 180);
    color: rgb(255, 255, 255);
    outline: none;
    margin: 0px;
    text-decoration: none;
    transition: background-color 250ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 250ms cubic-bezier(0.4,0,0.2,1),
                border-color 250ms cubic-bezier(0.4,0,0.2,1),
                transform 250ms cubic-bezier(0.4,0,0.2,1);
    padding: 6px 16px;
    border-radius: 8px;
    border:1px solid transparent;
}
.the_log_form_info{
    padding-top:24px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: rgb(129,134,141);
    text-align: center;
}
.the_login_holder_but{
    padding-top:24px;
}
.t_m_b_in_r_title_a{
        margin: 0px;
    line-height: 1.57;
    color: rgb(136, 152, 161);
    font-size: 18px;
    font-weight: 400;
    padding-bottom:24px;
}
.t_m_b_in_r_title h1{
  margin: 0px;
  line-height: 1.57;
  font-family: "Inter Display", sans-serif;
  color: rgb(0, 0, 0);
  font-size: 28px;
  font-weight: 500;
  margin-bottom:10px;
}
.the_log_in_but:hover{
    background-color: rgba(24, 160, 180,0.6);
    transform: scale(1.05);
}
.t_m_b_in_r_logo{
    margin-bottom:40px;
}
.the_otp_boxss{
    justify-content: space-between;
}
.otp-input{
        width: 100%;
    text-align: center;
    padding: 10px;
    margin: 8px;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 8px;
    min-height: 30px;
    outline: rgba(32,55,181,0.2);
}
.otp-input:hover{
    box-shadow: rgba(32,55,181,0.2) 0px 0px 0px 2px;
}
.the_cerifyyy_top{
    margin-top:10px;
    text-align: center;
    line-height: 1.57;
    color: rgb(136, 152, 161);
    font-size: 16px;
    font-weight: 400;
}
.back_to_login{
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.back_to_login_txt{
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-decoration: none;
}
.back_to_login_arrow{
    max-height: 20px;
}
.the_log_form a{
    cursor: pointer;
}
.back_to_login_txt:hover{
    text-decoration: underline;
}
.the_login_holder_but_verify_text{
    text-align: center;
    margin-top: 15px;
        margin: 0px;
    line-height: 1.57;
    color: rgb(136, 152, 161);
    font-size: 16px;
    font-weight: 400;
}
.the_clock_time{
    color:rgb(24, 160, 180);
    display: inline-block;
}
.the_log_form_input_in_input{
    width: 100%;
    box-sizing: border-box;
    display: flex
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; /* צבע הרקע שלך */
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important; /* צבע טקסט */
}
.the_red_oneee{
    border:1px solid red;
}
.the_loading_wait_for_email{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}
.the_loading_wait_for_email_in{
    text-align: center;
}
.the_loadin_txt{
    margin-top:20px;
    font-weight: bold;
    font-size:20px;
}
.the_loadin_txt_a{
   margin-top:10px; 
   color: rgb(136, 152, 161);
   margin-bottom: 10px;
}
.the_loadin_txt_b{
    color: rgb(136, 152, 161);
}
.the_loading_wait_for_email_in_imggg_holder {
    width: 100px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #E9F5F7;
    border: 2px solid #D6E7EA;
    margin-right: auto;
    margin-left: auto;

    /* אנימציה עדינה של ה־border */
    animation: borderPulse 3s ease-in-out infinite;
}

.the_loading_img img {
    width: 70px;
    display: block;              /* שלא יהיו מרווחים מוזרים */
}

/* סיבוב האייקון – איטי וחלק */
.rotate-loader {
    animation: rotateLoader 8s linear infinite;  /* יותר איטי */
    transform-origin: center center;
}

@keyframes rotateLoader {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.03);   /* הגדלה קטנה ומרכזית */
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* שינוי צבע border עדין */
@keyframes borderPulse {
    0% {
        border-color: #D6E7EA;
        box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.05);
    }
    50% {
        border-color: #B8DCE3;
        box-shadow: 0 0 0 6px rgba(0, 184, 148, 0.06);
    }
    100% {
        border-color: #D6E7EA;
        box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.05);
    }
}

.otp-anim {
    white-space: nowrap;      /* שלא ישבר שורה */
    letter-spacing: 1px;      /* רווח קל בין האותיות */
    color: #A0A8B0;
    font-size: 16px;
}

.otp-anim .letter {
    display: inline-block;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%   { transform: scale(1);   opacity: 1; }
    40%  { transform: scale(1.25); opacity: 0.8; }
    100% { transform: scale(1);   opacity: 1; }
}