body,html{font-family:OpenSans-Regular;font-size:13px;color:#53565a;margin:0;padding:0;height:100%;background:#f5f5f5!important}
body {-webkit-overflow-scrolling: touch;}
/* MaterialDesignIcons.com */
@font-face {
    font-family: "Material Design Icons";
    src: url("../fonts/materialdesignicons-webfont.eot?v=4.8.95");
    src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=4.8.95") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=4.8.95") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=4.8.95") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=4.8.95") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'scmweb10';
    src: url(../fonts/scmweb10.woff) format('woff'), url(../fonts/scmweb10.ttf) format('truetype'), url(../fonts/scmweb10.svg#Sri-TSCRegular) format('svg');
    font-display: block;
}
a{outline:0!important}a:hover{text-decoration:none}
@font-face {
    font-family: 'OpenSans-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/OpenSans-Regular.ttf'); /* IE9 Compat Modes */
    src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans-ExtraBold';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/OpenSans-ExtraBold.ttf'); /* IE9 Compat Modes */
    src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */
}.modal{text-align:center}.modal:before{display:inline-block;vertical-align:middle;content:" ";height:100%}.modal-dialog{display:inline-block;text-align:left;vertical-align:middle}.col-md-4.col-sm-4.col-xs-12.home{padding-left:15px}.modal.fade .modal-dialog{-webkit-transform:scale(.9);-moz-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9);opacity:0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.modal.fade.in .modal-dialog{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.collapse.navbar-collapse{padding-right:0}nav.navbar-default .container-fluid{padding-right:11px}span#lblMsg{position:absolute;background:#fff;top:73px;left:-220px;box-shadow:0 0 5px #888;width:210px;padding:12px;font-size:15px;display:none;z-index:99999}
span#lblMsg:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #f3f3f3;top:16px;position:absolute;right:-15px;transform:rotate(270deg)}
#page_loader{background-repeat:no-repeat;background-position:center;width:100%;height:100%;background-color:#fff;opacity:.7;display:none;position:fixed;top:0;z-index:99999999}.full_width_input_sec{width:100%;float:left}.left_side_sec.input_box_eff_wrap{width:49%;float:left}.input_box_eff_wrap{position:relative;margin-bottom:-4px}.input_box_eff_wrap input.input_effect,.input_box_eff_wrap select.select_effect,.input_box_eff_wrap textarea.textarea_effect{font-size:14px;padding:10px 10px 0 0;display:block;width:100%;border:0;border-bottom:1px solid #c1c1c1;height:40px;border-radius:0;float:left;margin:5px 0}input.input_effect:focus,select.select_effect:focus,textarea.textarea_effect:focus{outline:0}label.effect_lbl{color:#999;font-size:16px;font-weight:400;float:left;width:43%;font-family:OpenSans-Semibold;text-transform:uppercase}
input.input_effect:focus ~ label.effect_lbl, input.input_effect:valid ~ label.effect_lbl,
select.select_effect:focus ~ label.effect_lbl, select.select_effect:valid ~ label.effect_lbl,
textarea.textarea_effect:focus ~ label.effect_lbl, textarea.textarea_effect:valid ~ label.effect_lbl,
input.input_effect[readonly='readonly'] ~ label.effect_lbl, input.select_effect[readonly='readonly'] ~ label.effect_lbl {
    top: -2px;
    font-size: 13px;
    color: #004066;
}
.highlight_input {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}
.loginPaper .eyeBlock a:focus {
    box-shadow: none !important;
}
input.input_effect:focus ~ .highlight_input {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background: #5264AE;
    }
    to {
        width: 0;
        background: transparent;
    }
}
.textarea_effect {
    resize: none;
}
.bar_input {
    display: block;
    width: 95%;
}
.bar_input:before, .bar_input:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 5px;
    position: absolute;
    background: #004066;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.bar_textarea:before, .bar_textarea:after {
    bottom: 27px;
}
.bar_input:before {
    left: 50%;
}
.bar_input:after {
    right: 50%;
}
input.input_effect:focus ~ .bar_input:before, input.input_effect:focus ~ .bar_input:after,
select.select_effect:focus ~ .bar_input:before, select.select_effect:focus ~ .bar_input:after,
textarea.textarea_effect:focus ~ .bar_input:before, textarea.textarea_effect:focus ~ .bar_input:after {
    width: 50%;
}
.form-group, .tab-content > .active {
    float: left;
    width: 100%;
}
.form-group {
    margin-bottom: 0px !important;
}
.or_section {
    float: left;
    width: 55px;
    position: absolute;
    background: #fff;
    height: 55px;
    border-radius: 50%;
    left: 157px;
    top: -9px;
    padding: 18px 16px;
    font-weight: bold;
}
.toast-message {
    max-width: 95%;
}
.signinfull {
    width: 100% !important;
    text-indent: 1px !important;
}
.spinner {
    margin: auto;
    width: 70px;
    text-align: center;
    position: absolute;
    z-index: 999999999 !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 24px;
}
#page_loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: none;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 9999999 !important;
}
#change-pwd-divPopupFirstLogin.PopupDiv {
    z-index: 999999 !important;
    position: fixed !important;
    left: 0px !important;
    right: 0px !important;
    margin: auto !important;
    text-align: center;
    outline: none !important;
}
#change-pwd-divPopupFirstLogin .left_side_sec.input_box_eff_wrap {
    width: 100%;
}
#change-pwd-divPopupFirstLogin .input_box_eff_wrap input.input_effect {
    width: 95%;
}
#change-pwd-divPopupFirstLogin .full_width_input_sec {
    margin-bottom: 25px;
    padding-left: 21px;
}
#change-pwd-divPopupFirstLogin .popup_input_wrapper {
    padding-top: 15px;
}
#change-pwd-divPopupFirstLogin .bar_input:before {
    left: 45%;
}
#change-pwd-divPopupFirstLogin #btnChangePasswordFirstLogin {
    padding: 5px 20px;
    margin: 0 25px 15px;
}

#change-pwd-divPopupFirstLogin .bottom_area_home {
    clear: both;
    border-top: 1px solid #ccc;
    padding-top: 15px;
    text-align: right;
}
#change-pwd-divPopupFirstLogin #changepwdbody {
    padding: 0px;
}
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
    }
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
#pswd_info {
    top: 53px !important;
    left: 120px !important;
}
.footer_nav_default > ul > li#faqlink {
    display: none !important;
}

label.hiddenlabels {
    display: none !important;
}

@media (min-width: 1200px) {
    .container {
        width: auto !important;
    }
    .mid_section > .container {
        width: 1200px !important;
    }
}




/* Skip nav styles from Liam */
.skipnav {
    position: absolute;
    display: none;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size:13px;
}
/*For all, including Opera. Display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/
* html .skipnav {
    display: block
}
/*Switch on for IE6 and below*/
* + html .skipnav {
    display: block
}
/*Switch on for IE7*/
:root .skipnav {
    display: block
}
/*Switch on for Moz, FF and Safari*/
.skipnav p{margin:5px 0 0 0;padding:0;position:absolute;font-size:2em}.skipnav a{width:200px;display:block;color:#fff;background:#333;text-decoration:none;padding:5px;position:absolute;left:-1000em;top:0;font-weight:700;text-align:center}.skipnav a:visited{color:#fff}.skipnav a:active,.skipnav a:focus{z-index:99;top:0;left:10px;border:solid #777 1px;color:#fff;background:#237ca9!important;font-family:OpenSans-SemiBold}
/*Note IE bug that requires use of :active to mimic effect of :focus*/
.skipnav a:hover {
    cursor: default
}
button.close > img {
    display: none;
}
button.close:before {
    content: "\ea0e";
    font-family: "scmfonts" !important;
    font-size: 16px;
    color: #2782ae;
}
.toast .toast-message {
    font-size: 16px;
}
.modal-title, .modal-title-changepwd {
    font-size: 21px;
    font-weight: normal;
    margin: 0;
}
.input_box_eff_wrap {
    position: relative;
    margin-bottom: 10px;
}
.popup_area .bottom_area_home, .popup_area_new .bottom_area_home {
    border-top: 1px solid #b9b9b9;
    padding: 15px 15px;
    margin-top: 0px;
    clear: both;
    float: left;
    width: 100%;
}
.submit-button {
    background: none repeat scroll 0 0 #88be1c !important;
    border: 0 !important;
    border-radius: 0px !important;
    color: #f0f0f0 !important;
    float: right;
    font-size: 18px;
    height: auto !important;
    margin-bottom: 0;
    padding: 6px 27px !important;
    text-align: center;
    min-width: 135px !important;
    font-weight: bold;
}
.cancel-button {
    background: none repeat scroll 0 0 #88be1c !important;
    border: 0 !important;
    border-radius: 0px !important;
    color: #f0f0f0 !important;
    float: left;
    font-size: 18px;
    height: auto !important;
    margin-bottom: 0px;
    margin-left: 0;
    padding: 6px 27px !important;
    text-align: center;
    font-weight: bold;
    min-width: 135px !important;
}
#change-pwd-divPopupFirstLogin #changepwdbody {
    padding: 15px 0px 0px;
    float: left;
    background: #fff;
    width: 100%;
}
.input_box_eff_wrap label.effect_lbl {
    color: #004066;
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 6px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
input.input_effect:focus ~ label.effect_lbl, input.input_effect:valid ~ label.effect_lbl, select.select_effect:focus ~ label.effect_lbl, select.select_effect:valid ~ label.effect_lbl, textarea.textarea_effect:focus ~ label.effect_lbl, textarea.textarea_effect:valid ~ label.effect_lbl, input.input_effect[readonly='readonly'] ~ label.effect_lbl, input.input_effect:not([type=button])[readonly] ~ label.effect_lbl, input.select_effect[readonly='readonly'] ~ label.effect_lbl, input.input_effect[disabled="disabled"] ~ label.effect_lbl, select.select_effect[disabled="disabled"] ~ label.effect_lbl, input.input_effect[minlength="minlength"] ~ label.effect_lbl {
    top: -22px;
    font-size: 16px;
}
#changepwdbody .strengthdiv{margin-bottom:-20px;float:left;text-align:left;width:94%!important}.hide_txt_pass_box{display:none!important}#change-pwd-divPopupFirstLogin .strengthdiv a.button_strength{font-size:15px}_:-ms-fullscreen,:root .strengthdiv > a.button_strength{display:block!important}
i.paybillico:before {
    font-family: "scmweb10" !important;
    content: "\e902" !important; font-size: 23px;
    margin-right: 1px;
}
i.srvciconfont:before {
    font-family: "scmweb10" !important;
    content: "\e901" !important;
    font-size: 20px;
    margin-right: 3px;
}
i.outgiconfont:before {
    font-family: "scmweb10" !important;
    content: "\e903" !important; font-size: 23px;
    margin-right: 1px;
}
.full_widthNew_ui .input_box_eff_wrap label.effect_lbl{color:#525252!important}.login-btn.login-btn{width:100%;border:0;line-height:inherit;padding:10px 0 10px 0;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font-weight:400;transition:ease-out .3s;font-family:OpenSans-Semibold;text-transform:capitalize;font-size:16px;margin-bottom:3px}i.reportwater:before{font-family:"Material Design Icons"!important;content:"\F58C"!important;font-size:29px;margin-right:-5px}.material-icons.reportwater{min-height:17px;float:left}div.full_width_input_sec span.error_messagecommon{top:-14px}section.loginbg{display:contents}.eyeBlock a{display:block;float:left;width:40px;height:30px}.eyeBlock a:focus{outline:1px solid #000}
.input_box_eff_wrap input.input_effect:-webkit-autofill ~ .effect_lbl {top: 14px;font-size: 12px;}
.wrapper_dd {float: right;}
/*--  Custom Checkbox CSS style --*/
.mtrl_chkbx_new {
    z-index: 0;
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 21px;
    font-family: OpenSans-Regular;
    margin: 6px 0 10px;
}

    /* Input */
    .mtrl_chkbx_new > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
        box-shadow: none;
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }

    /* Span */
    .mtrl_chkbx_new > span {
        display: inline-block;
        width: 100%;
        cursor: pointer;
        font-weight: normal;
        font-size: 16px;
        line-height:24px;
    }

        /* Box */
        .mtrl_chkbx_new > span::before {
            content: "";
            display: inline-block;
            box-sizing: border-box;
            margin: 3px 11px 3px 1px;
            border: solid 2px; /* Safari */
            border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
            border-radius: 2px;
            width: 18px;
            height: 18px;
            vertical-align: top;
            transition: border-color 0.2s, background-color 0.2s;
        }

        /* Checkmark */
        .mtrl_chkbx_new > span::after {
            content: "";
            display: block;
            position: absolute;
            top: 4px;
            left: 2px;
            width: 10px;
            height: 5px;
            border: solid 2px transparent;
            border-right: none;
            border-top: none;
            transform: translate(3px, 4px) rotate(-45deg);
        }

    /* Checked, Indeterminate */
    .mtrl_chkbx_new > input:checked,
    .mtrl_chkbx_new > input:indeterminate {
        background-color: rgb(var(--pure-material-primary-rgb, 25, 130, 197));
    }

        .mtrl_chkbx_new > input:checked + span::before,
        .mtrl_chkbx_new > input:indeterminate + span::before {
            border-color: #339853;
            background-color: #339853;
        }

        .mtrl_chkbx_new > input:checked + span::after,
        .mtrl_chkbx_new > input:indeterminate + span::after {
            border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        }

        .mtrl_chkbx_new > input:indeterminate + span::after {
            border-left: none;
            transform: translate(4px, 3px);
        }

    /* Hover, Focus */
    .mtrl_chkbx_new:hover > input {
        opacity: 0.04;
    }

    .mtrl_chkbx_new > input:focus {
        opacity: 0.12;
    }

    .mtrl_chkbx_new:hover > input:focus {
        opacity: 0.16;
    }

    /* Active */
    .mtrl_chkbx_new > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }

        .mtrl_chkbx_new > input:active + span::before {
            border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        }

    .mtrl_chkbx_new > input:checked:active + span::before {
        border-color: transparent;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
    }

    /* Disabled */
    .mtrl_chkbx_new > input:disabled {
        opacity: 0;
    }

        .mtrl_chkbx_new > input:disabled + span {
            color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
            cursor: initial;
        }

            .mtrl_chkbx_new > input:disabled + span::before {
                border-color: currentColor;
            }

    .mtrl_chkbx_new > input:checked:disabled + span::before,
    .mtrl_chkbx_new > input:indeterminate:disabled + span::before {
        border-color: transparent;
        background-color: currentColor;
    }
/*--  End Custom Checkbox CSS style --*/
#back-top{display:none!important}.eyeBlock{position:absolute;top:16px;right:0}.eyeBlock a.showEye:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\F6CF";font-size:29px!important;position:absolute;right:10px;top:-4px;color:#696969}.eyeBlock a.hideEye:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\F6D0";font-size:29px!important;position:absolute;right:10px;top:-4px;color:#696969}
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear {display: none;}
.header {
    background: #fff;
    padding: 12px 0;
    box-shadow: 0 0px 2px -2px rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0px 5px 0 rgb(0 0 0 / 12%);
    min-height: 54px;
}
dl#LanguageDrpdwn_sample {
    margin: 0px;
    padding-top: 5px;
}
/*Arabic Css Style*/
html[lang="AR"] {
    direction: rtl;
    overflow-x: hidden;
}
    html[lang="AR"] label.effect_lbl {
        right: 13px;
    }
    html[lang="AR"] .eyeBlock {
        position: absolute;
        top: 16px;
        left: 10px;
        right: auto;
    }
    html[lang="AR"] .list-group {
        align-items: end;
    }
    html[lang="AR"] .LoginLists i.material-icons {
        padding-right: 15px;
        padding-left: 20px;
        float: none;
    }
    html[lang="AR"] .group-links {
        flex-direction: row-reverse;
    }
/*Arabic Css Style*/
@media (max-width:992px) {
   .logoContainer{max-width:100%;flex-basis:100%;padding-bottom:5px}.RightSectionBar{margin-top:40px;padding-left:10px!important}.RightSectionBar p{padding:20px 20px!important}
}
@media (max-width:767px) {
    .container-fluid.top-menu {
        padding: 0px;
    }
    .loginPaper{padding:3rem 2rem 2rem 2rem}a#logo-container{max-width:60%}
}