.application-name {
    text-align: center;
    color: #292524;
    /*font-family: 'Arial'!important;*/
    font-style: normal!important;
    font-weight: 400!important;
    font-size: 18px!important;
    line-height: 28px!important;
    margin-top: 24px;
    margin-bottom: 36px;
}

#username-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.username-icon-left {
    display: inline-block;
    margin-left: 4px;
    background-image: url("../img/user.svg");
    background-repeat: no-repeat;
    background-size: 18px!important;
    background-position:center center ;
    float:left;
    width:30px;
    height:18px;
    margin-top:8px;
    position: absolute;
    z-index: 10;
}

.login-content .box .login-field {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'!important;
    font-size: 19px;
    padding-top: 4px;
    padding-bottom: 6px;
    width: 306px;
    height: 30px;
    /*font-family: Arial;*/
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    /*letter-spacing: -0.4px;*/
    text-align: left;
    color: #000000;
    border: 1px solid #CCCCCC;
}

.username-input{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'!important;
    /*width: 180px!important;*/
    border-radius: 30px;
    text-align: center !important;
    font-size: 14px!important;
    margin-bottom: 36px;
}

.email-input-component {
    width: 100%;
    max-width: 400px;
    height: 100%;
}

.email-input-component .input-wrapper {
    position: relative;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    height: 50%;
}

.email-input-component .icon {
    width: 20px;
    height: 20px;
    color: #111827;
    margin-right: 12px;
}

.email-input-component .input-field {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #111827;
    background: transparent;
}

.email-input-component .input-label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    color: #111827;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.2s ease;
}

.email-input-component .placeholder-example {
    position: absolute;
    left: 48px;
    top: 70%;
    transform: translateY(-50%);
    color: #6b7280;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.email-input-component .input-wrapper:not(:focus-within) .input-field:placeholder-shown ~ .placeholder-example {
    opacity: 1;
}

#emailOtpChannel:hover {
    border-color: rgba(204, 51, 51, 1) ;
}
#mobileOtpChannel:hover {
    border-color: rgba(204, 51, 51, 1) ;
}
.disabled-state{
    /*color: var(--accent) !important;*/
    cursor: not-allowed !important;
}
.enabled-state{
    cursor: pointer !important;
    color: rgba(204, 51, 51, 1)
}

/* OTP input container - use stable layout to prevent shift */
.otp-input-container {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    min-height: 44px;
    position: relative;
}

.otp-input{
    /* Fixed dimensions - use exact pixels */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;

    /* Use transparent border initially, change only color on focus */
    border: 2px solid #CCCCCC !important;
    border-radius: 3px;

    /* Text styling */
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 36px;

    /* Stable box model */
    box-sizing: border-box !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;

    /* Remove ALL browser default styling */
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* No transitions */
    transition: none !important;

    /* Flex item control */
    flex: 0 0 40px !important;

    /* Background */
    background-color: #fff;
}

/* Remove margin from last OTP input */
.otp-input:last-of-type {
    margin-right: 0 !important;
}

/* The global `.card-pf input` rule (in _styles.css) gives every input
   `padding: 8px 16px 8px 36px` - the extra 36px left padding is room for a leading
   icon in text fields. The Resend button has no icon, so that asymmetric padding
   pushes its label visibly to the right. Reset to symmetric padding so the button
   lines up the same as in the other themes. */
#sendEmailOtp {
    padding: 8px 16px !important;
}

.otp-input:focus {
    border: 2px solid #3b82f6 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.otp-input:hover:not(:focus) {
    border: 2px solid #999999 !important;
}

.otp-input-filled {
    border-color: #93c5fd !important;
    background-color: #f0f9ff;
}