﻿body {
    margin: 75px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    /*height: 100vh;*/
    /*overflow: hidden;*/
}

:root {
    /* Keep variables aligned with site-wide palette */
    --brand-green: #56AB44;
    --brand-amber: #F9A825;
    --brand-coral: #F0625E;
    --brand-purple: #9C27B0;
    --brand-pink: #EC407A;

    --cs-blue: var(--brand-green);
    --cs-dark-blue: var(--brand-purple);
    --cs-light-blue-text: var(--brand-amber);
    --hh-gray-1: rgb(244,244,244);
}
.login-logo {    
    display: block;
    padding:15px;
    margin: auto;
    max-width: 100%;
}
.login-form-label {   
    color:rgb(127,127,127);
    font-weight:bold;
}
.login-container {
    justify-content: center;
    background-color: rgb(244,244,244);
}

.login-form {
    margin:auto;
}


.login-button {
    background-color: var(--cs-blue) !important;
    color: white !important;
    border-color: var(--cs-blue) !important;
}
    .login-button:hover {
        background-color: var(--cs-dark-blue) !important;
        color: var(--cs-light-blue-text) !important;
        border-color: var(--cs-dark-blue) !important;
        font-weight: bold;
    }
.footer-text {
    color: var(--cs-light-blue-text);
}

/* Brand link styling for login pages */
a {
    color: var(--cs-blue) !important;
    text-decoration: none;
}
a:hover, a:focus {
    color: #111 !important;
    text-decoration: underline;
}

@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .login-container {
        width: 100%;
        margin: 0;
        padding: 15px;
    }
    
    .login-form {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .row {
        margin: 0;
    }
}