:root {
    --green: #4fb748;
    --darkgreen: #009345;
    --darkgrey: #404041;
    --grey: #6d6e70;
    --lightgrey: rgba(144, 143, 143, 0.8);
    --smokeygrey: whitesmoke;
    --white: white;
}

.text-green {
    color: var(--green);
}

#bg-btn{
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

#bg-btn:hover{
    background-color: var(--darkgreen);
    border-color: var(--darkgreen);
    color: var(--white);
}

#login-form-card {

    background: var(--white);
    padding: 15px;
    border-radius: 5px;
    border: none;
}

#brand_logo_container {
    position: absolute;
    top: -75px;
    border-radius: 50%;
    background: var(--white);
    padding: 10px;
    text-align: center;
}


.brand_logo {
    height: 100px;
    width: 100px;
    border-radius: 50%;

}

#form-container {
    margin-top: 10rem;
    color: var(--lightgrey);

}

#login-form {
    margin-top: 3rem;
}

.login_btn {
    width: 100%;
    background: var(--green) !important;
    color: white !important;
}

.login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.login_container {
    padding: 0 2rem;
}

.input-group-text {
    background: var(--green) !important;
    color: white !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}