@font-face {
    font-family: OpenSans-Light;
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/OpenSans-Light.eot");
    src: url("../fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light.ttf") format("truetype"), url("../fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
}

@font-face {
    font-family: OpenSans-Regular;
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular.ttf") format("truetype"), url("../fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg");
}

@font-face {
    font-family: OpenSans-SemiBold;
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/OpenSans-SemiBold.eot");
    src: url("../fonts/OpenSans-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiBold.ttf") format("truetype"), url("../fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold") format("svg");
}

@font-face {
    font-family: OpenSans-Bold;
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold.ttf") format("truetype"), url("../fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg");
}
.OpenSans-Light
select[multiple=multiple] {
    font-family: "OpenSans-Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:14px;
     
}

.OpenSans-Regular,
body, em, dfn, cite, i,
/*label,*/
select, textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="intl_tel"],
a,
.feat-section-tc {
    font-family: "OpenSans-Regular", "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0
}
.OpenSans-SemiBold,
button, html input[type="button"], input[type="reset"], input[type="submit"],
/*label,
span[id$="Label"],*/ /* Targets IDs ending with "Label" */
/*span[id*="lbl"],*/ /* Targets IDs containing "lbl" */
/*span[class*="label"],*/
h1, 
/*h2,*/ 
h3,
h4,
h5,
h6, strong,
p.bold, b {
    font-family: "OpenSans-SemiBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-style: normal;
    /*font-size: 20px;*/
}

.OpenSans-Bold14,
label,
span[id$="Label"], /* Targets IDs ending with "Label" */
span[id*="lbl"], /* Targets IDs containing "lbl" */
span[class*="label"] {
    font-family: "OpenSans-Bold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    vertical-align: middle;
}

.OpenSans-Bold,
h2 {
    font-family: "OpenSans-Bold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    vertical-align: middle;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    /*login-bg.jpg*/
    background-image: url('Images/login-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*background-attachment: fixed;*/
    /*min-height: 100vh;*/
    /*    background: transparent url('Images/login-bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    /*font-size: 100%*/
}

/* Laptop screens - fit width, show left and right edges */
@media (max-width: 1366px) {
    html {
        -webkit-background-size: 100% auto !important; /* Full width, height auto */
        -moz-background-size: 100% auto !important;
        -o-background-size: 100% auto !important;
        background-size: 100% auto !important;
    }
}

/* Smaller laptops */
@media (max-width: 1024px) {
    html {
        -webkit-background-size: 100% auto !important;
        -moz-background-size: 100% auto !important;
        -o-background-size: 100% auto !important;
        background-size: 100% auto !important;
    }
}


@media (max-width:600px) {
    html {
        background: #fff;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    color:#000000; /*original #757575;*/
    letter-spacing: 1px /*-0.74px*/;
    opacity: 1;
    /*background: #f5f5f5;*/
}

.main-container {
    max-width: 900px;
    margin: 60px auto 0 auto;
    position: relative;
}

    @media (max-width:1024px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 500px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 455px) {
        .main-container {
            margin: 0px auto;
        }
    }

    @media only screen and (max-width: 340px) {
        .main-container {
            margin: 0px auto;
        }
    }

        a {
            color: #8013D3;
            outline: none;
        }

        a:hover {
            text-decoration: underline;
        }

    .form-container {
        max-width: 450px;
        margin: 0 auto 20px auto;
    }
@media only screen and (max-width: 1000px) {
    .form-container {
        margin: 0 auto 20px auto;
    }
}
    .form-body {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        overflow: hidden;
        padding: 14px 50px;
        /*color: #ffffff;*/
        /*border-radius: 19px*/ /*remove rounded corners*/;
        -webkit-box-shadow: 0 0px 12px #e3e3e3;
        box-shadow: 0 0px 12px #e3e3e3;
        opacity: 1;
    }

    @media only screen and (max-width: 500px) {
        .form-body {
            padding: 50px 40px;
        }
    }

    @media only screen and (max-width: 455px) {
        .form-body {
            padding: 45px 20px;
        }
    }

    @media only screen and (max-width: 340px) {
        .form-body {
            padding: 30px 10px;
        }
    }

    .form-body .title {
        margin: 0;
        margin-top: -30px; /* Fine-tune spacing */
        margin-bottom: 30px; /* Fine-tune spacing */
        text-align: center;
        font-weight: normal;
        color: #FF0023;
    }
    .form-body .smaller {
        font-size: medium;
        padding: 5px;
    }
    div.logo {
        width: auto;
        height: 100px;
        text-align: center;
        background: transparent url(../LogonV2/Images/Logo.png) center no-repeat;
        opacity: 1;
        margin-bottom: 10px; /* Space below logo */
        /*background-size: 1016px 410px*/
    }

    .social-login ul {
        list-style-type: none;
        margin: 30px 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .social-login ul li {
            -webkit-box-flex: 1;
            -ms-flex: 1 auto;
            flex: 1 auto;
        }

            .social-login ul li a {
                background-color: #56385a;
                border-radius: 3px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 15px;
                color: #e6e6e6;
                font-weight: bold;
                text-decoration: none;
                -webkit-transition: background-color 0.3s;
                transition: background-color 0.3s;
            }

                .social-login ul li a::before {
                    content: "";
                    width: 30px;
                    height: 30px;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 30px;
                    margin-right: 5px;
                }

                .social-login ul li a:hover {
                    background-color: #fff199;
                    color: #0e090e;
                    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }

    li.google {
        margin-right: 10px;
    }

        li.google a::before {
            background-image: url("../images/google.png");
        }

    li.fb {
        margin-left: 10px;
    }

        li.fb a::before {
            margin: 0;
            background-image: url("../images/fb.png");
        }

    @media only screen and (max-width: 400px) {
        .social-login ul {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        li.google,
        li.fb {
            margin: 0;
        }

        li.google {
            margin-bottom: 10px;
        }
    }

    ._or {
        text-align: center;
        margin-bottom: 20px;
        /*color: #d9d9d9;*/
    }

    .the-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    /*.the-form label {
        margin-bottom: 5px;
        color: #e6e6e6;
        font-weight: bold;
    }

    .the-form [type="email"],
    .the-form [type="password"] {
        padding: 15px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        margin-bottom: 15px;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
        color: #e6e6e6;
    }

        .the-form [type="email"]::-webkit-input-placeholder,
        .the-form [type="password"]::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::-moz-placeholder,
        .the-form [type="password"]::-moz-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]:-ms-input-placeholder,
        .form-container .form-body .the-form [type="password"]:-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::-ms-input-placeholder,
        .form-container .form-body .the-form [type="password"]::-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]::placeholder,
        .form-container .form-body .the-form [type="password"]::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .the-form [type="email"]:hover,
        .the-form [type="password"]:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .the-form [type="email"]:focus,
        .the-form [type="password"]:focus {
            background: #ffffff;
            -webkit-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            border-color: #4a304d;
            color: #222222;
        }

            .the-form [type="email"]:focus::-webkit-input-placeholder,
            .form-container .form-body .the-form [type="password"]:focus::-webkit-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::-moz-placeholder,
            .the-form [type="password"]:focus::-moz-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus:-ms-input-placeholder,
            .the-form [type="password"]:focus:-ms-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::-ms-input-placeholder,
            .the-form [type="password"]:focus::-ms-input-placeholder {
                color: #666666;
            }

            .the-form [type="email"]:focus::placeholder,
            .the-form [type="password"]:focus::placeholder {
                color: #666666;
            }

    .the-form [type="submit"] {
        background: #ffb37b;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 18px;
        font-size: 20px;
        border-radius: 3px;
        cursor: pointer;
        margin-top: 20px;
        color: black;
        -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

        .the-form [type="submit"]:hover {
            opacity: 0.9;
        }*/


    /* Forms
   ========================================================================== */
    /**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
    /**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit;
        /* 1 */
        font: inherit;
        /* 2 */
        margin: 0;
        /* 3 */
    }

    /**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
    button {
        overflow: visible;
    }

    /**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
    button,
    select {
        text-transform: none;
    }

    /**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        /* 2 */
        cursor: pointer;
        /* 3 */
    }

        /**
 * Re-set default cursor for disabled elements.
 */
        button[disabled],
        html input[disabled] {
            cursor: default;
        }

        /**
 * Remove inner padding and border in Firefox 4+.
 */
        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

    /**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
    input {
        line-height: normal;
    }

        /**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
        input[type="checkbox"],
        input[type="radio"] {
            box-sizing: border-box;
            /* 1 */
            padding: 0;
            /* 2 */
        }

        /**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            height: auto;
        }

        /**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
        input[type="search"] {
            -webkit-appearance: textfield;
            /* 1 */
            /* 2 */
            box-sizing: content-box;
        }

            /**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
            input[type="search"]::-webkit-search-cancel-button,
            input[type="search"]::-webkit-search-decoration {
                -webkit-appearance: none;
            }

    /**
 * Define consistent border, margin, and padding.
 */
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }

    /**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
    legend {
        border: 0;
        /* 1 */
        padding: 0;
        /* 2 */
    }

    /**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
    textarea {
        overflow: auto;
    }

    /**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
    optgroup {
        font-weight: bold;
    }


.form-footer {
    max-width: 500px;
    margin: 0 auto 50px auto;
    text-align: center !important;
}
@media (max-width:1000px) {
    .form-footer {
        max-width: 500px;
        margin: auto;
        text-align: center !important;
    }
}
        .form-footer a {
            color: #000000;
            text-decoration: underline !important;
        }

        .form-footer ul {
            list-style-type: none;
            margin: 30px 0;
            padding: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            .form-footer ul li {
                -webkit-box-flex: 1;
                -ms-flex: 1 auto;
                flex: 1 auto;
                margin-left:6px;
            }

                .form-footer ul li a {
                    border-radius: 3px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    /*padding: 15px;*/
                    /*color: #FF0023;*/
                    /*font-weight: normal !important;*/
                    text-decoration: none;
                    /*letter-spacing: -1.01px;*/
                    /*-webkit-transition: background-color 0.3s;*/
                    /*transition: background-color 0.3s;*/
                }
                @media (max-width: 1000px) {
                    .form-footer ul li a {
                        letter-spacing: -1.01px;
                    }
                }

        .form-footer ul li a::before {
            content: "";
            /*width: 30px;*/
            /*height: 30px;*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: 30px;
            margin-right: 5px;
            margin-left: 5px;
        }

        .form-footer ul li a:hover {
            /*background-color: #fff199;
                color: #0e090e;*/
            /*-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);*/
        }


    .feat-section {
        /*padding: 5% 5%;*/
        width: 100%;
        /*float: left;*/
        display: inline-block;
    }

    .feat-section-tc {
        font-size: 12px !important;
        /*padding: 5% 5%;*/
        width: 90%;
        /*float: left;*/
        display: inline-block;
    }
.feat-section-tc a {
    font-size: 12px !important;
}
    .feat-section__inner {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        max-width: 1200px;
        margin: 0 auto;
    }

    .feat-section__content {
        /*-ms-flex-preferred-size: 60%;
    flex-basis: 60%;
    margin-right: 5%;*/
    }

    .feat-section__image-wrap {
        /*-ms-flex-preferred-size: 40%;
    flex-basis: 40%;*/
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        margin-top: 30px;
    }

    .feat-section__image {
        max-width: 100%;
        /*    position: absolute;
    margin-left: 90px;*/
    }
    /*IE 11*/
    _:-ms-fullscreen, :root .feat-section__image {
        margin-left: 30px;
    }
    /*Edge*/
    @supports (-ms-ime-align:auto) {
        .feat-section__image {
            margin-left: 110px;
        }
    }
    /*Firefox*/
    @-moz-document url-prefix() {
        .feat-section__image {
            margin-left: 110px;
        }
    }
    /*IE 11*/
    _:-ms-fullscreen, :root .isologo {
        right: 44em;
    }

    @media (max-width: 650px) {
        .feat-section__image {
            margin-top: 0em;
            right: 0;
        }
        /*IE 11*/
        _:-ms-fullscreen, :root .feat-section__image {
            margin-top: 0em;
            right: 0;
        }
        /*Edge*/
        @supports (-ms-ime-align:auto) {
            .feat-section__image {
                margin-top: 0em;
                right: 0;
            }
        }
        /*Firefox*/
        @-moz-document url-prefix() {
            .feat-section__image {
                margin-top: 0em;
                right: 0;
            }
        }
    }

    .srouce {
        text-align: center;
        padding: 10px;
    }


/* Edge/IE: hide the built-in password reveal/clear buttons so they don't overlap our custom eye */
.RadInput input[type="password"]::-ms-reveal,
.RadInput input[type="password"]::-ms-clear {
    display: none;
}

/* Reserve space for the custom eye button (applies to both password + text since you toggle the type) */
.field-container .RadInput input {
    padding-right: 40px !important;
}
.reveal-eye {
    color: #666666;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    border: none;
    padding: 0;
    background-color: transparent;
    background-image: url(../LogonV2/Images/reveal-password-open.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease;
}


        .reveal-eye.is-visible {
            visibility: visible;
            opacity: 1;
            transition: opacity .2s ease 0s, visibility 0s linear 0s;
        }

        /* Open eye icon when showing password - SVG */
        .reveal-eye.showing-password {
            background-image: url(../LogonV2/Images/reveal-password-closed.svg);
        }

        /* Focus styles for keyboard accessibility */
        .reveal-eye:focus {
            outline: 2px solid #000000;
            outline-offset: 2px;
            border-radius: 2px;
        }

            /* Remove focus outline on mouse click, keep for keyboard */
            .reveal-eye:focus:not(:focus-visible) {
                outline: none;
            }

        .reveal-eye:focus-visible {
            outline: 2px solid #000000;
            outline-offset: 2px;
            border-radius: 2px;
        }

        /* Hover effect */
        .reveal-eye:hover {
            opacity: 0.7;
        }