/*
    Landis+Gyr Green:   #7ab800 (Login, Next & Finish buttons)
                        #91d018 (Hover state for the above buttons)
                        #689d00 (Active state for the above buttons)
    Landis+Gyr Grey:    #4d4f53 (Grey bar behind Command Center Logo and Previous button)
                        #707175 (Hover state for the above buttons)
                        #363739 (Active state for the above buttons)
    Landis+Gyr Red:     #823c47 (Cancel button)
                        #9a545e (Hover state for the above buttons)
                        #6a373f (Active state for the above buttons)
    Text on white:      #333
*/

/*
    Small screen first design
*/

body {
    background-color: #fff;
    color: #4d4f53;
    font-family: 'Source Sans Pro' !important;
    line-height: 2;
    margin: 0;
}

img {
    border: 0;
}

br {
    display: none;
}


#Branding {
    background: #7ab800 url(../images/EmergeLogo.png) no-repeat 50% 50%;
    font-weight: bold;
}

#SubBranding {
    background: url(../images/GridstreamLogo.png) no-repeat 50% 50%;
    height: 74px;
}

#LoginControls {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

.btn-login {
    margin-left: 0px;
}


#ConnectStringRow {
    color: #4d4f53;
    font-size: 8pt;
    line-height: normal;
    visibility: hidden;
}

@media (max-width: 1023px) { /* 767px */

}


/*
    Larger screen sizes can accomodate the full, original design
*/
@media (min-width: 1024px) { /* 768px */
    body {
        line-height: normal;
    }

    br {
        display: inline;
    }

    #ErrMsg {
        height: auto;
        left: 50%;
        margin-left: -338px;
        margin-top: -370px;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 677px;
        z-index: 200;
    }

    #Container {
        background: url(../images/CommandCenterLoginBkgndTop.png) no-repeat 0 0;
        height: 220px;
        left: 50%;
        margin-left: -338px;
        margin-top: -335px;
        position: absolute;
        top: 50%;
        width: 677px;
        z-index: 100;
    }

    #LoginArea {
        background-color: #fff;
        height: 250px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        position: absolute;
        text-align: left;
        top: 50%;
        width: 100%;
    }

    #BottomContainer {
        background: url(../images/CommandCenterLoginBkgndBottom.png) no-repeat 0 0;
        height: 250px;
        left: 50%;
        margin-left: -338px;
        margin-top: 155px;
        position: absolute;
        top: 50%;
        width: 677px;
        z-index: 100;
    }

    .btn-login {
        margin-left: 96px;
    }

    .password-label {
        padding-right: 24px !important;
    }

    #Branding {
        background: #4d4f53 url(../images/EmergeLogo.png) no-repeat 50% -40%;
        height: 25px;
        line-height: 25px;
        position: absolute;
        width: 100%;
    }

    #SubBranding {
        background: url(../images/GridstreamLogo.png) no-repeat 50% 50%;
        height: 250px;
        left: 0;
        position: absolute;
        top: 25px;
        width: 265px;
    }

    #LoginControls {
        height: 94px;
        position: absolute;
        right: 0;
        top: 60px;
        width: 412px;
    }

    #ConnectStringRow {
        clear: both;
        float: left;
        height: 20px;
        margin-top: 5px;
        text-align: center;
        visibility: hidden;
        width: 100%;
    }

    #UserLabel, #PasswordLabel {
        clear: left;
        float: left;
        margin-top: 10px;
        min-width: 95px;
        font-family: 'Source Sans Pro';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        text-transform: capitalize;
        color: var(--Dark-Gray);
    }
}