.layout-plain {
    margin-top: 0 !important;
}

#loginPage {
    width: 100vw;
    height: 100vh;
}

@media (min-width:768px) {
    #loginAbove {
        height: 15vh;
    }

    #loginBelow {
        height: 30vh;
    }

    #loginMidRow {
        height: 55vh;
    }
}

@media (max-width:767px) {
    #loginAbove {
        height: 5vh;
    }

    #loginBelow {
        height: 10vh;
    }

    #loginMidRow {
        height: 85vh;
    }
}

#loginMobileRow {
    height: 90vh;
}

#loginMobileAbove {
    height: 5vh;
    background-color: #023056;
}

#loginMobileBelow {
    height: 5vh;
    background-color: #023056;
}

#loginMobileCol {
    height: 100%;
}

#loginMobileRow .loginMobileFillerRow {
    height: 10%;
}

#loginMobileRow .loginMobileFillerCol {
    width: 100%;
    height: 100%;
}

#loginMobileRow .loginMobileImgRow {
    height: 30%;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
}

#loginMobileRow .formMobile {
    width: 100% !important;
    height: 100% !important;
}

#loginMobileRow .loginMobileFormCol {
    width: 100%;
    display: flex;
}

#loginMobileRow .loginMobileFormRow {
    height: 60%;
    padding-top: 5%;
}

#loginMobileRow .loginMobileImg {
    width: 75%;
    height: 75%;
    background: url('../Images/surgere_cos_blue.png') no-repeat center;
    background-size: contain !important;
    padding: 5%;
}

#loginMobileRow .loginLabels {
    color: #6281b8;
}

#loginMobileRow .loginInputRow {
    padding: 5px 5px 5px 5px;
}

#loginMobileRow .loginButtonRow {
    padding: 10% 5px 15px 5px;
}

#loginMobileRow .loginTextbox:disabled {
    color: lightgrey !important;
}

#loginMobileButton {
    background-color: #6281b8 !important;
}

#loginMobileButton:disabled {
    background-color: #ccd6e8 !important;
}

#loginMobileContinueButton {
    background-color: #003057 !important;
}

#loginMobileCancelButton {
}

#loginMainContent {
    border: 1px solid #BFBFBF;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    overflow: hidden;
    height: 100%;
}

#loginMainContentRow {
    height: 100%;
}

#loginLeft {
    border: 1px solid #BFBFBF;
    background-color: #023056;
    height: 100%;
    color: #FFFFFF;
}

#loginLeftInnerRow {
    height: 100%;
    padding: 5% 15% 25% 25%;
}

#loginLeft .loginLeftCol {
    width: 100%;
}

#loginLeft .loginLeftMsg {
    margin-top: 30%;
    margin-bottom: 5%;
    font-size: 1.5vw;
}

#loginLeft .loginLeftImg {
    width: 100%;
    background: url('../images/SurgereLogo_Login.png') no-repeat;
    background-size: contain !important;
    height: 8vh;
    padding-bottom: 5%;
}

#loginLeft .line {
    box-sizing: border-box;
    height: 1px;
    width: 70%;
    border: 3px solid #7BADD3;
    border-radius: 3px;
}

#lineContainerCol {
    height: 5%;
    margin: 5% 0 0 0;
}

#loginLeft .loginLeftSubMsg {
    height: 15%;
    font-size: .75vw;
}

#loginRight {
    height: 100%;
    align-items: center;
    overflow: auto;
}

#loginRight .formRight {
    width: 100% !important;
    height: 100% !important;
}

#loginLeft .loginRightCol {
    width: 100%;
    display: flex;
}

#loginRight .loginRightFillerRow {
    height:10%;
}

#loginRight .loginRightFillerCol {
    width: 100%;
    height: 100%;
}

#loginRight .loginRightImgRow {
    height: 30%;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
}

#loginRight .loginRightImg {
    width: 75%;
    height: 75%;
    background: url('../Images/surgere_cos_blue.png') no-repeat center;
    background-size: contain !important;
    padding: 5%;
}

#loginRight .loginRightFormRow {
    height: 60%;
    padding-top: 5%;
}

#loginRight .loginLabels {
    color: #6281b8;
    font-size: .8vw;
}

#loginRight .loginInputRow {
    padding: 5px 5px 5px 5px;
}

#loginRight .loginButtonRow {
    padding: 10% 5px 15px 5px;
}

#loginRight .loginTextbox:disabled {
    color: lightgrey !important;
}

#loginButton {
    background-color: #6281b8 !important;
}

#loginButton:disabled {
    background-color: #ccd6e8 !important;
}

@media (min-width:768px) {
    .loginButtonText {
        display: block;
    }
    .loginButtonIcon {
        display: none;
    }

    .cancelButtonText {
        display: block;
    }

    .cancelButtonIcon {
        display: none;
    }

    .continueButtonText {
        display: block;
    }

    .continueButtonIcon {
        display: none;
    }
}

@media (max-width:767px) {
    .loginButtonText {
        display: none;
    }

    .loginButtonIcon {
        display: block;
        margin-right: 0px;
    }

    .cancelButtonText {
        display: none;
    }

    .cancelButtonIcon {
        display: block;
        margin-right: 0px;
    }

    .continueButtonText {
        display: none;
    }

    .continueButtonIcon {
        display: block;
        margin-right: 0px;
    }
}

#loginContinueButton {
    background-color: #003057 !important;
}

#loginCancelButton {
}

.buttonCol {
    display: inline-block;
}

.buttonText {
    font-size: .75vw;
}