/*
    for:
    Login.html
    Signup.html
    ForgetPassword.html
*/

#sign-up-container {
    margin-top: 70px !important; /* 0 for no banner */
    max-width: 1200px !important;
    background-color: whitesmoke !important;
}

.form-container {
    margin-top: 100px !important;
    max-width: 500px !important;
    background-color: whitesmoke;

    * {
        box-sizing: border-box;
    }

    .user-type-container {
        width: 100%;
        color: white;
        border-radius: 5px;
        padding-top: .05rem;
        padding-bottom: .05rem;
        margin-bottom: 1rem;

        .btn-check:checked + .btn {
            background-color: #095287 !important;
        }

        .btn {
            color: white;
            background-color: #3e6e89;
            border: none !important;

            @media screen and (max-width: 340px) {
                margin-bottom: .5rem;
            }

            &:hover {
                background-color: #095287 !important;
                color: white;
            }
        }

        @media screen and (max-width: 900px) {
            width: 80%;
        }

        @media screen and (max-width: 400px) {
            width: 100%;
            font-size: smaller;
        }
    }

    /* Common styles for .btn and .btn btn-primary */
    .btn, .btn btn-primary {
        color: white;
        border: none !important; /* Keep this for button styling */
        transition: all .3s ease-in-out;

        &:hover {
            /* font-weight: bold; */
            background-color: rgba(3, 47, 72, 0.6);
            color: #032f48 !important;
        }
    }

    /* Specific .btn btn-primary styles */
    .btn btn-primary {
        border-radius: 1rem;
        padding: .25rem .5rem;
        width: 80%;
        background-color: #032f48;
        border: 2px solid #032f48 !important;
    }

    .button-row {
        a {
            color: #032f48 !important;
            transition: all .1s ease-in-out;

            &:hover {
                color: #3d8ab4 !important;
            }
        }
    }

    legend {
        border-bottom: 4px solid rgba(3, 47, 72, 0.9);
    }

    /* Media Queries */
    @media only screen and (max-width: 400px) {
        .g-recaptcha {
            transform: scale(0.7);
        }
    }

    @media only screen and (min-width: 768px) {
        .signup-row-2 {
            border-left: solid grey 3px !important;
        }
    }
}