.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding: 5px;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
}

#master {
    min-height: 100%;
    position: relative;
}

.sticky-top{
    position:sticky;
    top:0;
    z-index:1024;
}

.header {
    height: 60px;
    padding-left: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: white;
}

.loginArea {
    display: flex;
    width: 100%;
    height: calc(100vh - 118px);
    align-items: center;
    justify-content: center;
}

.headingLogo {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    color: #000000;
    /* margin: 0px 5px;*/
}
.signin {
    width: 432px;
    height: 40px;
    left: 24px;
    top: 16px;
    /* EDM Header / MD */

    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    /* or 140% */

    display: flex;
    align-items: center;
    /* EDM Gray/Gray80 (Text) */

    color: #333333;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin:16px 24px 8px 24px;
}
.unionLogo {
    left: 0%;
    right: 0%;
    top: 0.58%;
    bottom: -0.58%;
    margin-right:15px;
}

.loginForm {
    padding: 0px;
    width: 480px;
    height: 319px;
    background: #FFFFFF;
    box-shadow: 0px 8px 8px -2px rgba(34, 34, 34, 0.1);
    border-radius: 4px;
}

.formHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 78px;
    padding-left:24px;
}

.formHeader img {
        width: 146.75px;
        left: 504px;
        top: 333.5px;
        height:40px;
    }

hr {
    width: 480px;
    height: 1px;
    left: 0px;
    top: 78px;
    /* EDM Gray/Gray15 */

    background: #DDDDDD;
    /* Inside auto layout */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin: 0px 0px;
}

.loginPage {
     background-image: url(Images/LoginPageBg-2022.jpg);
     background-size:cover;
}

.copyRight {
    display:inline;
    height: 20px;
    /* EDM Body/LG/Regular (400) */
    float:right;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    text-decoration:none !important;
    /* EDM Gray/Gray100 */
    color: #222222;
   
}

    .loginPage #master {
        display: table;
        width: 100%;
        height: 100%;
    }

#loginboxMid {
    left: 0;
    width: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#loginboxInner {
    position: relative;
    margin-top: -30px;
}

#startInner {
    margin: 0;
}

.loginImage {
    display: table-cell;
    height: 100%;
    background: #fff url('images/loginpage-bg.jpg') no-repeat right bottom;
    background-size: cover;
}

.loginPage footer {
    /*margin-top:37px;
    margin-bottom:37px;*/
    width:100%;
    left: 0;
}

.loginbox {
    width: auto;
   /* height: 280px */
}

.ihsMarkitLogo img {
    margin: 15px 0 0 15px;
    width: 175px;
    height: 50px;
}

.ihsMarkitLogo span {
    visibility: hidden;
}

.loginPage .logo {
    display: block;
    margin: 0 auto 30px auto;
    padding: 80px 0 0 0px;
    color: #333;
    font-size: 2.429em;
    text-align: left;
    line-height: 100%;
    text-decoration: none;
    letter-spacing: -0.02em;
}

    .loginPage .logo h4 {
        display: block;
        margin: 15px 0 0 1px;
        color: #666;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

/*.loginbox:after {
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}*/
.buttonGroup {
    display:flex;
    justify-content:right;
    padding: 16px 24px;
    width: 480px;
    height: 64px;
    left: 0px;
    top: 255px;
    bottom:0px;
    /* EDM Gray/Gray05 */

    background: #F5F5F5;
    /* Inside auto layout */

    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
    margin: 24px 0px 0;
}

.loginbox .inputGroup,
.loginbox .inputGroup,
.loginbox .buttonGroup {
    position:relative;
    margin: 0px 24px 8px 24px ;
}

    .loginbox .inputGroup label {
        position: absolute;
        top: -19px;
        left: 0;
        color: #999;
        font-size: 10px;
    }

    .loginbox .inputGroup i {
        position: absolute;
        top: 9px;
        right: 10px;
        color: #666666;
        font-size: 1.429em;
    }

/*.loginbox .inputGroupFocus i {
    color: #00ab4e;
}*/

    .loginbox .inputGroup input {
        width: 100%;
        padding: 10px 32px 10px 10px;
        margin: 0;
        font-family: 'Segoe UI';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #666666;
        line-height: 18px;
        background: #FFFFFF;
        /* EDM Gray/Gray25 */
        border: 1px solid #BBBBBB;
        box-sizing: border-box;
        border-radius: 2px;
    }
input[type="submit"]:disabled {
    text-transform: none;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: rgba(34, 34, 34, 0.4);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 16px 7px;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    /* EDM Gray/Opacities/Gray 10% */
    background: rgba(34, 34, 34, 0.1);
    border-radius: 4px;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
}
input[type="submit"] {
    text-transform: none;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    /* EDM Gray/White */
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 16px 7px;
    position: static;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: #D6002A;
    border-radius: 4px;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
}
/*.loginbox .inputGroupFocus input {
    color: #000;
}*/
.loginbox [type="submit"] {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0;
    font-size: 1em;
    background-color: #00ab4e;
}

.loginLoader {
    margin-top: -10px;
}

    .loginLoader i {
        visibility: hidden;
        font-size: 2em;
    }

.loginError {
    display: none;
    padding-left: 0;
    margin-top: 1em;
    color: #f00;
    text-align: left;
}

.rememberMe {
    padding-left: 0;
    color: #666;
    text-align: left;
}

#rememberMe + label {
    font-size: 14px;
    font-weight: 400;
}

    #rememberMe + label:before {
        width: 15px;
        height: 15px;
        font-size: 13px;
        font-weight: 600;
    }

.contentArea {
    margin: 0;
    display: table-cell;
    height: 100%;
}

    .contentArea .sep {
        height: 260px;
        border-left: 1px solid #ccc;
    }

.loginPage h2.siteName {
    margin: 0 0 30px 0;
    text-align: left;
}

    .loginPage h2.siteName span {
        display: block;
        margin-top: 5px;
        color: #888;
        font-size: 0.533em;
        font-weight: 400;
    }

.loginPage .loginbox {
    text-align: left;
}

.errorDetected + .loginLinks {
    padding-top: 20px;
}

.loginLinks {
    margin:10px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-decoration-line: underline;
    color: #00729E;
}

    .loginLinks ul {
        display: inline;
        list-style-type: none;
        margin: 0 0 20px;
        padding: 0;
    }

        .loginLinks ul li {
            display: inline;
            margin: 0 10px 5px 0;
            padding: 0 15px 0 0;
            border-right: 1px solid #ccc;
            font-size: 14px;
        }

  

            .loginLinks a {
                color: #00729E;
            }

                .loginLinks a:hover {
                    color: #00729E;
                }

/* ----------- 480 ----------- */
@media only screen and (max-width: 480px) {
    .mainWrapper {
        padding-bottom: 100px;
    }

    footer.footer {
    bottom: 0;
    padding:0;
    }

    .byMarkit {
        float: none;
    }

    .loginbox {
        width: 90%;
    }

    .loginPage footer {
        width:100%;
        bottom: 0;
    }

        .loginPage footer div {
            width: 100%;
        }

            .loginPage footer div a {
                float: none;
            }

    #loginboxMid {
        vertical-align: top;
    }

    #loginboxInner {
        margin-top: 20px;
    }

    #startPage h1 {
        line-height: 150%;
    }

    .adminSection a {
        height: auto;
        padding-bottom: 20px;
    }

    .adminSection p {
        font-size: 0.857em;
    }

    #loginPage .contentArea {
        margin: 20px 0 0;
    }

        #loginPage .contentArea .loginbox {
            padding-left: 80px;
            padding-right: 80px;
        }

            #loginPage .contentArea .loginbox,
            #loginPage .contentArea .loginbox h2,
            #loginPage .contentArea .loginbox p {
                text-align: center;
            }

                #loginPage .contentArea .loginbox h2 {
                    font-size: 1.714em;
                }

                #loginPage .contentArea .loginbox p {
                    font-size: 0.857em;
                }

        #loginPage .contentArea .siteName {
            margin-bottom: 20px;
        }

    #loginPage .logo {
        margin-top: 0;
        padding: 0;
        text-align: center;
    }

    #loginPage .contentArea .loginbox {
        float: none;
        clear: both;
        position: relative;
        margin: 0 auto;
        padding: 20px;
    }

    .loginLinks {
        padding: 20px 0 20px 0;
    }
}

/* ----------- less than 768 ----------- */
@media only screen and (max-width: 768px) {
    .loginPage .introTitle {
        margin-top: 50px;
    }

    .loginPage .loginImage {
        display: none;
    }
}

/* ----------- 768 ----------- */
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #startPage .contentArea {
        margin: 60px 0 0;
    }

    .loginPage .contentArea .sep {
        height: 0;
        border-left: none;
    }

    .loginPage .contentArea .loginbox {
        padding-left: 20px;
        padding-right: 20px;
        float: none;
        clear: both;
        position: relative;
        margin: 0 auto;
    }
        /*  .loginPage .contentArea .loginbox {
        float: none;
        clear: both;
        position: relative;
        margin: 0 auto;
    }*/
        .loginPage .contentArea .loginbox,
        .loginPage .contentArea .loginbox h2,
        .loginPage .contentArea .loginbox p {
            text-align: center;
        }

    .loginPage .contentArea .siteName {
        margin-bottom: 20px;
    }

    .loginPage .logo {
        margin-top: 0;
        padding: 0;
        text-align: center;
    }
}


/* ----------- ipad landscape ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .loginPage .logo h4 {
        font-size: 15px;
    }

    .loginLinks ul {
        white-space: nowrap;
    }

        .loginLinks ul li {
            font-size: 13px;
        }
}