html{font-size :10px}


.header-brand-container{
    position: relative;
    top:1.5rem;
    left:1rem;

}

.username-text{
    font-size: 2rem;
    font-family: 'Open Sans';
    letter-spacing: 0.1rem;
}

.header-username-container{
    width: 7%;
}



/* body{
    background-image: url('/static/images/newbackground.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
} */

.body-container{
    /* /* width: 100%; */
    /* background-image: url('/static/images/login.png') ;
    background-repeat: no-repeat; */
    /* background-size:cover; */
    /* background-size: 100% 100%;
    background-position: center; */ 
    width: 96%;
    
}


/* Need changes linear gradient */
.username-password-container{
    width: 35%;
    /* background: rgb(3,14,77) left,  rgb(0,32,96) right; */
    /* background:linear-gradient(#030e4d, #030e4d) left, linear-gradient(#002060 , #002060 ) right;  */
            /* background:  #030e4d left,  #002060 right;
            /* background: linear-gradient(to right #030e4d 90%,#002060 ); */
    /* border:2px solid black; */
    background: linear-gradient(to right,#030e4d ,rgb(3,15,82) );

    background-size: 100% 100%;
     background-repeat: no-repeat;
}

.image-parent-container{
    width: 65%;
    /* background-color: rgb(0,32,96); */
    background:linear-gradient(to right, rgb(3,15,82),rgb(0,32,96));

    height: 100%;
    /* border:2px solid black; */
    background-size: 100% 100%;
     background-repeat: no-repeat;
}

.image-container{
    height:100%;
    /* background-image: url('/static/images/loginbackground.png');
    background-size: contain;
    background-repeat: no-repeat; */
    /* border: 2px solid black; */
    width: 98%;
}

.image-container-block{
    background-image: url('/static/images/Picture1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;

    height: 82%;
}

.username-password-parent{
    /* border: 2px solid black; */
    height: 90%;
    width: 100%;
    margin-top: 5rem;
}

.welcome-header-text{
    font-size: 2.8rem;
    font-family: "Open Sans";
    letter-spacing: 4px;
    word-spacing: 2px;
    font-weight: 600;
}

.username-password-child-container{
    /* border:1px solid black; */
    gap:1rem;
    
}

.welcome-header-container{
    height: 25%;
}

.username-password{
    gap:1rem
}

.member-login-text{
    font-size: 2rem;
    color:red;
    font-family: "Open Sans";
    letter-spacing: .1rem;
    word-spacing: 0.3rem;

}

.username-container{
    height: 4rem;
}
input.username {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: transparent;
    background-image: url('/static/images/username_icon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    color: #fff;
    font-family: 'Open Sans';
    background-size:2.5rem
  }


  input.password {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: transparent;
    background-image: url('/static/images/password_icon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    color: #fff;
    font-family: 'Open Sans';
    background-size:1.8rem
  }


  .forget-password-text{
    font-family: "Open Sans";
    font-size: 1.5rem;
  }

  .username-passwrd-container{
    gap:3rem
  }

  .sign-in-btn{
    font-size: 1.8rem;
  }


  input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important; /* Ensures text remains white */
    transition: background-color 5000s ease-in-out 0s !important;
}

@media only screen and (max-width: 928px){
    .username-text{
        font-size: 1.8rem;
    }

}







@media only screen and (max-width: 1114px){
    .header-username-container{
        width: 8%;
        
    }

    



}

@media only screen and (max-width: 997px){
    .header-username-container{
        width: 10%;
        
    }

    



}


@media only screen and (max-width: 726px){
    .header-username-container{
        width: 12%;
        
    }

}

@media only screen and (max-width: 583px){
    .header-username-container{
        width: 16%;
        
    }

}


@media only screen and (max-width: 1294px){
    .welcome-header-text{
        /* font-size: 2.4rem; */
        
    }

}


@media only screen and (max-width: 1203px){
    .welcome-header-text{
        font-size: 2rem;
        
    }

}


@media only screen and (max-width: 1205px){
    .welcome-header-text{
        font-size: 1.6rem;
        
    }

}


@media only screen and (max-width: 984px){
    .welcome-header-text{
        font-size: 1.4rem;
        
    }

}


@media only screen and (max-width: 886px){
    .welcome-header-text{
        font-size: 1.2rem;
        
    }

    .sign-in-btn {
        font-size: 1rem;
    }

}


@media only screen and (max-width: 886px){
    .welcome-header-text{
        font-size: 1rem;
        
    }

    /* .sign-in-btn {
        font-size: 1rem;
    } */

}


@media only screen and (max-width: 799px){
    .welcome-header-text{
        font-size: .8rem;
        
    }

    /* .sign-in-btn {
        font-size: 1rem;
    } */

}

@media only screen and (max-width: 1169px){
   

    .sign-in-btn {
        font-size: 1.4rem;
    }
    }



.form-control:focus {
    color: #212529;
    background-color: transparent !important;
    /* border-color: #86b7fe; */
    /* outline: 0; */
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}



/* input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
} */


/* input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { 
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
} */


.show-password{
    font-size: 1.3rem;
    color: #fff;
}


input{
    caret-color: #fff !important;
}