* {
    box-sizing: border-box;
}

html, body, form {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background-image: linear-gradient(119deg, rgba(22,53,86,100) 0%, rgba(0,94,105,100) 56%, rgba(0,194,194,100) 100%);
}

h1 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: x-large;
    color: #163556;
    font-weight: 600;
}

input {
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid #eee;
    border-radius: 3px;
    background: #fff;
    outline: 0;
    width: 100%;
    border-color: #00b1b1;
    color: #163556;
}

ul {
    padding: 0;
}

    ul li {
        list-style-type: none;
        position: relative;
        max-width: 100%;
        padding: 0 20px;
        margin: auto;
    }

        ul li.inp-password-wrapper, ul li.inp-button-wrapper {
            margin-top: 10px;
        }

        ul li.inp-button-wrapper {
            height: 37px;
            margin: 30px auto 35px;
        }

            ul li.inp-button-wrapper::before {
                content: '';
                clear: both;
            }

#NewLoginRequest {
    height: 100%;
    width: 100%;
    padding-top: 7px;
}

.loginDiv {
    display: table;
    height: 100%;
    width: 100%;
}

.str-headers {
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 20px;
    font-size: x-large;
    font-weight: bolder;
}

.login-wrapper {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

    .login-wrapper ul {
        border: 1px solid #eee;
        border-radius: 3px;
        margin: 0;
    }

        .login-wrapper ul li {
            text-align: center;
        }

    .login-wrapper .logo-wrapper {
        max-width: 100%;
        height: auto;
        text-align: center;
    }

    .login-wrapper ul li h1 {
        text-transform: uppercase;
        text-align: left;
        color: #163556;
        margin: 30px 0 0 0;
    }

.error-wrapper {
    color: #DC5A6E;
    margin-top: 15px;
    float: left;
    margin-bottom: 15px;
}

.pull-left {
    float: left;
    height: 100%;
}

.pull-right {
    float: right;
    width: 105px;
    height: 100%;
    text-align: right;
}

#footer {
    text-align: center;
    margin-top: 80px;
}

    #footer #ContactInfo {
        display: inline-block;
    }

        #footer #ContactInfo img {
            display: inline-block;
            float: left;
        }

        #footer #ContactInfo #lblContactInfo {
            display: block;
            margin: 1px 0 0 15px;
            color: #ffffff
        }

/*LOGIN PAGE RIGHT SIDE*/
.loginRightSide img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

/*RAD-WINDOW*/
.RadWindow_SYS .rwIcon {
    display: none !important;
}

#divLoginParent {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

input[type="submit"] {
    font-size: 14px !important;
    height: 35px !important;
    max-width: fit-content !important;
}

.title {
    text-align: center;
}

#divLogin {
    max-width: 350px;
}

#divViews {
    background-color: #ffffff;
}

.view {
    display: flex;
    flex-flow: column;
    padding: 20px 0 0 0;
}

#divErrorMessage {
    padding: 0 0 20px 0;
    max-width: 350px;
    color: red;
    font-size: small;
    text-align: center;
}

/*User login credentials view*/
#divLoginCredentialsView div {
    padding: 20px 0px;
}

#divLoginCredentialsViewInput {
    display: inherit;
    flex-direction: column;
    align-items: center;
}

    #divLoginCredentialsViewInput input[type=text], input[type=password] {
        min-width: 150px;
        max-width: 300px;
        font-size: large;
        font-weight: bold;
        text-align: center;
    }

#divLoginCredentialsViewButton {
    display: inherit;
    justify-content: space-evenly;
}

/*User Mobile Number View*/
#divUserMobileNumberView div {
    padding: 20px 0px;
}

#divUserMobileNumberViewTitle {
    display: inherit;
    flex-flow: column;
}

    #divUserMobileNumberViewTitle span {
        padding: 10px 0;
    }

#divUserMobileNumberViewInput {
    display: inherit;
    justify-content: center;
}

    #divUserMobileNumberViewInput input[type=select] {
        min-width: 40px;
        max-width: 50px;
        text-align: center;
    }

    #divUserMobileNumberViewInput input[type=text] {
        min-width: 100px;
        max-width: 150px;
        font-size: large;
        font-weight: bold;
        text-align: center;
    }

#divUserMobileNumberViewButton {
    display: inherit;
    justify-content: space-evenly;
}

.countryPhoneCode {
    font-size: large;
    font-weight: bolder;
    padding: 7px 10px;
    border-radius: 3px;
    border-color: #00b1b1;
    color: #163556;
}

/*OTP View*/
#divOtpView div {
    padding: 20px 0px;
}

#divOtpViewTitle {
    display: inherit;
}

    #divOtpViewTitle span {
        padding: 10px 0;
    }

#divOtpViewInput {
    display: inherit;
    justify-content: center;
}

    #divOtpViewInput input[type=text] {
        min-width: 120px;
        max-width: 200px;
        font-size: large;
        font-weight: bold;
        text-align: center;
    }

#divOtpViewResend {
    display: inherit;
    justify-content: center;
    padding-top: unset !important;
    font-size: smaller;
}

#divOtpViewButton {
    display: inherit;
    justify-content: space-evenly;
}