.login-mobile {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    overflow: auto;
}

.login-mobile .div {
    background-color: #f5f5f5;
    width: 100%;
    max-width: 480px;
    min-width: 360px;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
}

.login-mobile .extras-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 328px;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.login-mobile .no-account-text {
    position: relative;
    width: fit-content;
    margin-top: -0.85px;
    font-family: "Noto Sans-Medium", Helvetica;
    font-weight: 500;
    color: #545454;
    font-size: clamp(12px, 3.5vw, 13.6px);
    letter-spacing: 0;
    line-height: normal;
}

.login-mobile .login-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 20px;
    margin-top: clamp(120px, 25vw, 177px);
    margin-bottom: 20px;
}

.login-mobile .upper-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11.36px;
    width: 100%;
}

.login-mobile .login-container-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-mobile .login-text {
    font-family: "Noto Sans-SemiBold", Helvetica;
    font-weight: 600;
    color: #545454;
    font-size: clamp(24px, 7vw, 29.2px);
    letter-spacing: 0;
    line-height: normal;
}

.login-mobile .text-wrapper-2 {
    font-family: "Noto Sans-Medium", Helvetica;
    font-weight: 500;
    font-size: clamp(11px, 3.5vw, 13px);
    color: #545454;
    letter-spacing: 0;
    line-height: normal;
}

.login-mobile .credentials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20.29px;
    width: 100%;
}

.login-mobile .div-wrapper-2 {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8.12px;
    padding: 11.36px 12.98px;
    border-radius: 9.74px;
    background-color: #ffffff;
}

.login-mobile .password-container {
    position: relative;
    padding-right: 40px;
    width: 100%;
}

.login-mobile .text-wrapper-3 {
    font-family: "Noto Sans-Regular", Helvetica;
    font-weight: 400;
    font-size: clamp(14px, 4vw, 16.2px);
    color: #545454;
    letter-spacing: 0;
    line-height: normal;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
}

.login-mobile .text-wrapper-3::placeholder {
    color: #a9a9a9;
}

.login-mobile .password-toggle-icon {
    position: absolute;
    right: 12.98px;
    width: clamp(16px, 5vw, 20px);
    height: clamp(16px, 5vw, 20px);
    cursor: pointer;
}

.login-mobile .login-container-3 {
    align-items: center;
    justify-content: center;
    gap: 9.74px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-mobile .login-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8.12px;
    padding: 11.36px 8.12px;
    background-color: #ffbd59;
    border-radius: 9.74px;
    cursor: pointer;
}

.login-mobile .login-button-text {
    all: unset;
    box-sizing: border-box;
    font-family: "Noto Sans-SemiBold", Helvetica;
    font-weight: 600;
    color: #545454;
    font-size: clamp(14px, 4vw, 16.2px);
    letter-spacing: 0;
    line-height: normal;
}

.login-mobile .logo-container {
    position: absolute;
    top: clamp(20px, 5vw, 40px);
    width: 100%;
    max-width: 340px;
    height: clamp(60px, 20vw, 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-mobile .logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .login-mobile .div {
        max-width: 480px;
    }
    
    .login-mobile .login-container {
        max-width: 400px;
    }
}