/* Login page styles */
@media (min-width: 768px) {
    .login-col-form .form-container.no-form {
        padding: 0;
        width: 70%;
        text-align: center;
    }

    .login-col-form .form-container .btn-login {
        text-transform: uppercase;
        font-family: var(--font-stick);
        font-size: var(--font-size-login-btn);
        padding: 24px 48px;
        width: 100%;
        cursor: pointer;
        color: var(--brand-green);
    }

    .login-container {
        max-width: 100% !important;
        background: var(--brand-green);
    }

    .login-col-image {
        background: var(--white);
    }

        .login-col-image img {
            max-width: 100%;
        }

    .login-col-form {
        background: var(--brand-green);
    }

        .login-col-form .form-container {
            background: var(--white);
            padding: 100px 120px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
        }

            .login-col-form .form-container form {
                width: 376px;
                max-width: 100%;
                margin: 0 auto;
            }

                .login-col-form .form-container form input {
                    border: 1px solid var(--border-gray);
                    border-radius: var(--border-radius-base);
                    background-color: var(--white);
                }

            .login-col-form .form-container .btn-primary {
                background-color: var(--primary-color);
                border-color: var(--primary-color);
            }

                .login-col-form .form-container .btn-primary:hover {
                    background-color: var(--primary-hover);
                    border-color: var(--primary-hover);
                }

                .login-col-form .form-container .btn-primary:active {
                    background-color: var(--primary-active);
                    border-color: var(--primary-active);
                }

    /* Login-specific responsive rules */
    @media (min-width: 768px) {
        .login-container {
            min-height: 100vh;
        }

        .login-col-image, .login-col-form {
            min-height: 100vh;
        }

            .login-col-image img.hawkeye {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
            }

            .login-col-image img.mrg {
                position: absolute;
                top: calc(50% + 180px);
                left: 50%;
                transform: translate(-50%, -50%);
                width: 170px;
            }
    }

    @media (max-width: 767px) {
        .login-container {
            min-height: 100vh;
        }

        .login-col-image {
            padding: 20px 20px;
        }

            .login-col-image img.hawkeye {
                width: 320px;
                margin: 0 auto;
                float: none;
                display: block;
            }

            .login-col-image img.mrg {
                width: 120px;
                margin: 20px auto 0;
                float: none;
                display: block;
            }

        .login-col-form {
            padding: 120px 20px;
        }

            .login-col-form .form-container {
                position: relative;
                padding: 100px 20px;
            }
    }
}