/* Default styles (for screens <= 1024px) */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}


body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    background-color: #ffffff; /* Light gray background */
}

.container {
    position: fixed;
    top: 0px;
    width: 375px;
    background-color: #ffffff; /* White background */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%; /* Ensures it stretches to the full height */
}

.row {
    display: flex;
    align-items: center;
    text-align: center;
}

#header {
    height: 68px;
    background-color: #ffffff; /* Background color for Row 1 */
    font-family: 'SF Pro Text', sans-serif; 
    display: flex; /* Flex container */
    justify-content: space-between; /* Distribute links with space between */
    align-items: center; /* Vertically center the links */
}


.link {
    font-weight: 500;
    font-size: 17px;
    color: #007AFF; /* Blue link color */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    outline-offset: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    touch-action: manipulation; /* Helps disable default tap behaviors */
    -webkit-focus-ring-color: transparent !important;
}

#newLink {
    position: relative;
    left: 16px;
}

#nextLink {
    position: relative;
    right: 16px;
}

#title {
    height: 42px;
    background-color: #ffffff; /* Different background for row2 */
    text-align: center; 
    justify-content: center;
    font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
    font-weight: 300; 
    font-size: 28px;
    color: black; 
}

#subtitle {
    height: 85px;
    text-align: center; 
    line-height: 19px;
    font-family: 'SF Pro Text', sans-serif; /* SF Pro Text for subtitle */
    font-weight: 350;
    font-size: 16px;
    color: black; 
    justify-content: center;
}

#username {
    height:25px;
    width: 295px; 
    border: 0px solid #ccc;
    line-height: 25px;
    font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
    font-weight: 350;
    color: #3C3C43; 
    font-size: 18px;
}

#password {
    height:25px;
    width: 295px;
    border: 0px solid #ccc;
    line-height: 25px;
    font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
    font-weight: 350;
    color: #3C3C43; 
    font-size: 18px;
}


#row3 {
    height: 45px;
    justify-content: center;    
}


#row4 {
    height: 45px;
    justify-content: center;
}

#row5 {
    height: 45px;
    justify-content: space-between;
}


/* Text: Remember Login */
#rememberLogin {
    margin-left: 16px;
    font-family: 'SF Pro Text', sans-serif;
    font-weight: 400; /* Use a standard weight if 350 is unsupported */
    font-size: 16px;
    color: #000;
}

/* Slider container */
.slider {
    position: relative;
    margin-right: 41.5px;
    width: 51px;
    height: 31px;
    display: inline-block;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
}

/* Hide default checkbox */
.slider input {
    display: none;
}

/* Slider bar (background) */
.slider-bar {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 20px;
    height: 100%;
    width: 100%;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
}

/* Slider circle (toggle) */
.slider-bar::before {
    content: '';
    position: absolute;
    height: 27px;
    width: 27px;
    background-color: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
}

/* Active (checked) state */
.slider input:checked + .slider-bar {
    background-color: #77D572;
}

.slider input:checked + .slider-bar::before {
    transform: translateX(20px);
}

/* Remove focus outline and active background */
.slider input:focus + .slider-bar,
.slider input:active + .slider-bar {
    outline: none;
    box-shadow: none;
    background-color: #ccc; 
}


/* Row 6 styles */
#row6 {
    
    height: 45px;
    background-color: #ffffff; 
    align-items: center;
    display: flex;
    }

/* Text: Forgot Password */
#forgotpassword {
    position: relative;
    left: 16px;
    font-family: 'SF Pro Text', sans-serif;
    font-weight: 400; /* Use a standard weight if 350 is unsupported */
    font-size: 16px;
    color: #000;
    
    
}


/* Styles for screens > 1024px */
@media (min-width: 1025px) {
    .container {
        width: 600px;
        background-color: #ffffff; /* White background */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 100%; /* Ensures it stretches to the full height */
    }

    body {
        
        background-color: gray; /* Light gray background */
    }
    
    .row {
        display: flex;
        align-items: center;
        text-align: center;
    }
    
    #header {
        height: 68px;
        background-color: #ffffff; /* Background color for Row 1 */
        font-family: 'SF Pro Text', sans-serif; 
        display: flex; /* Flex container */
        justify-content: space-between; /* Distribute links with space between */
        align-items: center; /* Vertically center the links */
    }
    
    .link {
        font-weight: 500;
        font-size: 17px;
        color: #007AFF; /* Blue link color */
        text-decoration: none;
    }
    
    #newLink {
        position: relative;
        left: 16px;
    }
    
    #nextLink {
        position: relative;
        right: 16px;
    }
    
    #title {
        height: 42px;
        background-color: #ffffff; /* Different background for row2 */
        text-align: center; 
        justify-content: center;
        font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
        font-weight: 300; 
        font-size: 28px;
        color: black; 
    }
    
    #subtitle {
        height: 85px;
        text-align: center; 
        line-height: 19px;
        font-family: 'SF Pro Text', sans-serif; /* SF Pro Text for subtitle */
        font-weight: 350;
        font-size: 16px;
        color: black; 
        justify-content: center;
    }
    
    #username {
        height:25px;
        width: 400px; 
        border: 0px solid #ccc;
        line-height: 25px;
        font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
        font-weight: 350;
        color: #3C3C43; 
        font-size: 18px;
    }
    
    #password {
        height:25px;
        width: 400px;
        border: 0px solid #ccc;
        line-height: 25px;
        font-family: 'SF Pro Display', sans-serif; /* SF Pro Display for title */
        font-weight: 350;
        color: #3C3C43; 
        font-size: 18px;
    }
    
    
    #row3 {
        height: 45px;
        justify-content: center;    
    }
    
    
    #row4 {
        height: 45px;
        justify-content: center;
    }
    
    #row5 {
        height: 45px;
        justify-content: space-between;
    }
    
    
    /* Text: Remember Login */
    #rememberLogin {
        margin-left: 16px;
        font-family: 'SF Pro Text', sans-serif;
        font-weight: 400; /* Use a standard weight if 350 is unsupported */
        font-size: 16px;
        color: #000;
    }
    
    /* Slider container */
    .slider {
        position: relative;
        margin-right: 41.5px;
        width: 51px;
        height: 31px;
        display: inline-block;
        -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
    }
    
    /* Hide default checkbox */
    .slider input {
        display: none;
    }
    
    /* Slider bar (background) */
    .slider-bar {
        position: absolute;
        cursor: pointer;
        background-color: #ccc;
        border-radius: 20px;
        height: 100%;
        width: 100%;
        transition: background-color 0.3s ease;
        -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
    }
    
    /* Slider circle (toggle) */
    .slider-bar::before {
        content: '';
        position: absolute;
        height: 27px;
        width: 27px;
        background-color: #fff;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
        -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
    }
    
    /* Active (checked) state */
    .slider input:checked + .slider-bar {
        background-color: #77D572;
    }
    
    .slider input:checked + .slider-bar::before {
        transform: translateX(20px);
    }
    
    /* Remove focus outline and active background */
    .slider input:focus + .slider-bar,
    .slider input:active + .slider-bar {
        outline: none;
        box-shadow: none;
        background-color: #ccc; 
    }
    
    
    /* Row 6 styles */
    #row6 {
        
        height: 45px;
        background-color: #ffffff; 
        align-items: center;
        display: flex;
        }
    
    /* Text: Forgot Password */
    #forgotpassword {
        position: relative;
        left: 16px;
        font-family: 'SF Pro Text', sans-serif;
        font-weight: 400; /* Use a standard weight if 350 is unsupported */
        font-size: 16px;
        color: #000;
        
        
    }
}