:root{
   --primary:#fe642b;
}


body{
    background-image: url('/assets/images/login-bg.jpg') ; 
    background-size: 100% 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;   
}

.login-card{
    background-color: #fff;
    height:auto;
    padding-block-end: 20px;
    width:400px;
    margin:auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin-block-start: 120px;
}

.login-img{
align-items: center; 
text-align: center;
}
.login-img img{
    height: 200px;
    margin: auto;
}
.material-form-group{
padding-block:15px;
padding-inline:30px 
}
.material-input{
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
    outline: none;
    font-size:17px;
    height: 24px;
}
 
 
.material-input[type="checkbox"]{
    width:auto;
    border: none;
    border-bottom: 1px solid gray;
    outline: none;
    height: 16px;
}
.material-input::placeholder{ 
font-size: 13px;
}
.material-input:focus{
    border-bottom: 2px solid var(--primary);
}

.material-form-button{
    padding-inline: 25px;
    padding-block:17px ;
    text-align: center;
}
.material-form-button button{
    width: 95%;
    margin: auto;
    border: none;
    background-color: var(--primary);
    padding-inline:20px ;
    padding-block: 6px;
    font-size: 15px;
    color: #fff;
    border-radius: 4px;
}