#sumato-logo{
    width: 30%;
    height: 18%;
}

html, body {
    overflow-y: auto;
    height: 100%;
}
.card {
    margin-bottom: 0 !important;
    height: 100vh;
}

.login-page {
    flex-direction: row !important;
    justify-content: end !important;
}


#imagediv {
    background-image: url(../img/background.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: local;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#LoginButton {
    background-image: linear-gradient(to left, #188FC2, #006085);
}


.card-body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



.input-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.input-tags {
    border: none; /* No full border */
    border-bottom: 2px solid #ccc; /* Bottom border only */
    border-bottom-left-radius: 6px; /* Slight rounding on bottom-left */
    border-bottom-right-radius: 6px; /* Slight rounding on bottom-right */
    width: 100%;
    outline: none;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 16px;
    background: white; /* Ensure visibility */
    transition: border-color 0.3s ease-in-out;
}

    .input-tags::placeholder {
        color: #8E8E93; /* Light gray placeholder */
        font-size: 14px;
    }

    .input-tags:focus {
        border-bottom: 2px solid #666; /* Darker border on focus */
        outline: none;
    }

.container{
    padding: 0 20%;
}

#LoginHeadingText {
    color: #006085;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}



.labels {
    color: black;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    margin-bottom: 5px;
}


#LoginButton {
    width: 100%;
    height: 40px;
    background: linear-gradient(270deg, #188FC2 16%, #006085 98%);
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-top: 20px; 
    transition: background 0.3s ease-in-out;
}






@media (max-width: 425px) {
    #bodytag {
        background-image: url(../img/login-bgimage.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }

    #card-upper-div{
        display:flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }


    #LoginHeadingText {
        color: #006085;
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px;
    }


    .container {
        padding: 0 10% !important;
    }

    #imagediv {
        display: none;
    }


    .card {
        display:flex;
        margin-bottom: 0 !important;
        height: 500px;
        width: 80%;
    }

/*    #for-image{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }*/

   


    p{
        margin-bottom: 5px !important;
    }
}

@media (min-width: 426px){

    #sumato-logo {
        width: 40%;
        height: 13%;
    }

   

    #LoginHeadingText {
        color: #006085;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px; 
    }
}

@media (min-width: 1023px){
    #sumato-logo {
        width: 30% !important;
        height: 18% !important;
    }

    #RememberMeLabel {
        margin-left: 5px;
        font-size: 12px;
        color: #29292A;
    }

    #ForgotPasswordLink {
        color: #006085;
        font-size: 15px;
        text-decoration: none;
    }
}


@media (min-width: 1441px) {
    #sumato-logo {
        width: 30%;
        height: 18%;
    }

    #LoginHeadingText {
        color: #006085;
        font-size: 22px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px;
    }

    .labels {
        color: black;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        margin-bottom: 5px; 
    }


    #LoginButton {
        width: 100%;
        height: 40px;
        background: linear-gradient(270deg, #188FC2 16%, #006085 98%);
        border-radius: 4px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        margin-top: 20px; 
        transition: background 0.3s ease-in-out;
    }

        #LoginButton:hover {
            background: linear-gradient(270deg, #006085 16%, #188FC2 98%);
        }

    #RememberMeLabel {
        margin-left: 5px;
        font-size: 14px;
        color: #29292A;
    }

    #ForgotPasswordLink {
        color: #006085;
        font-size: 18px;
        text-decoration: none;
    }

        #ForgotPasswordLink:hover {
            text-decoration: underline;
        }
}
/*
@media (min-width: 1440px) {
    html {
        font-size: 20px; 
    }
}*/

@media (max-width: 375px) {
    .container {
        padding: 0 5%; /* Reduce left-right padding */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card {
        width: 90%;
        height: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-body {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #LoginHeadingText {
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center;
    }

    .input-tags {
        padding: 10px;
        font-size: 14px;
        width: 100%;
    }

    .remember-me-container {
        display: flex;
        flex-direction: column; /* Column layout for small screens */
        align-items: flex-start; /* Align to left */
        width: 100%;
        margin-top: 10px;
    }

    #RememberMeLabel {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    #ForgotPasswordLink {
        font-size: 12px;
        text-align: left; /* Align left */
        margin-top: 5px; /* Add some space */
        width: 100%;
    }

    #LoginButton {
        width: 100%;
        margin-top: 15px;
    }
}

@media(min-width: 2065px){
    .input-label{
        font-size:18px;
    }

    #LoginHeadingText{
        font-size:30px;
    }

    #LoginButton {
        width: 100%;
        height: 40px;
        background: linear-gradient(270deg, #188FC2 16%, #006085 98%);
        border-radius: 4px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        margin-top: 20px;
        transition: background 0.3s ease-in-out;
    }
}