body {
    margin: 0px;
    font-family: roboto,arial,sans-serif;
}

/*font family............*/
@font-face {
    font-family: Roboto-Regular;
    src: url('../../../font/roboto/Regular/Roboto-Regular.ttf') format('truetype'), url('../../../font/roboto/Regular/Roboto-Regular.woff');
}

@font-face {
    font-family: Roboto-Medium;
    src: url('../../../font/roboto/Medium/Roboto-Medium.ttf') format('truetype'), url('../../../font/roboto/Medium/Roboto-Medium.woff');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../../../font/roboto/Bold/Roboto-Bold.ttf') format('truetype'), url('../../../font/roboto/Medium/Roboto-Bold.woff');
}

html, body, body * {
    font-family: Roboto-Regular;
}
/*............font family*/

#newlogin .Logincontainer {
    margin: 5.5% auto;
    border-radius: 7px;
    background-color: #ffffff;
    display: table;
    padding: 2% 0% 0% 0%;
    margin-bottom: 10px;
    width: 35%;
    /*border: 1px solid VAR(--subcolor14);*/
    border: 1px solid #ddd;
}



#newlogin .box #myform .form-title, #newlogin #QuestionAnswerdiv .form-title {
    font-size: 24px;
}

#newlogin .loginusername, #newlogin #txtpwd, #newlogin #txtSecurityAnswer, #newlogin #CaptchaInputText {
    height: 100%;
    padding: 13px 15px !important;
    z-index: 1;
    border: none !important;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    margin: 0px auto;
    outline: none !important;
    box-shadow: none;
    font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    background: white !important;
    /*border: 1px solid VAR(--subcolor14) !important;*/
    border: 1px solid #ddd !important;
    border-radius: 4px;
}

    #newlogin .loginusername:focus {
        border: 2px solid VAR(--maincolor) !important;
        padding: 13px 14px !important;
    }

    #newlogin #txtpwd:focus {
        border: 2px solid VAR(--maincolor) !important;
        padding: 13px 14px !important;
    }

    #newlogin #CaptchaInputText:focus {
        border: 2px solid VAR(--maincolor) !important;
        padding: 13px 14px !important;
    }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 30px white inset;
    background: white !important;
}

#newlogin .vgerror .loginusername, #newlogin .vgerror #txtpwd, #newlogin .vgerror #txtSecurityAnswer, #newlogin .vgerror #CaptchaInputText {
    border: 2px solid #d93025 !important;
    padding: 13px 14px !important;
}

.Vginputbox {
    height: 56px;
    position: relative;
}

.Vgshadow {
    position: absolute;
    top: 0px;
    border-radius: 4px;
}




.usernamePlaceholder, .passwordPlaceholder, .forgotPlaceholder, .captchaPlaceholder {
    background: #fff;
    bottom: 17px;
    box-sizing: border-box;
    color: #80868b;
    left: 8px;
    padding: 0 8px;
    -ms-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    -moz-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    -o-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    width: auto;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    font-size: 16px;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -moz-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    -ms-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -moz-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -moz-transition-property: color,bottom,transform;
    transition-property: color,bottom,transform;
    color: rgba(0,0,0,0.38);
    font-family: Arial;
}




@media (min-width: 601px) {
    #newlogin .loginusername {
        font-size: 16px;
    }

    .usernamePlaceholder, .passwordPlaceholder {
        font-size: 16px;
    }
}


.loginusername:focus + span + .usernamePlaceholder, #txtpwd:focus + span + .passwordPlaceholder, #newlogin #txtSecurityAnswer:focus + span + .forgotPlaceholder, #newlogin #CaptchaInputText:focus + .captchaPlaceholder {
    -moz-transform: scale(.75) translateY(-39px);
    -ms-transform: scale(.75) translateY(-39px);
    transform: scale(.75) translateY(-39px);
    color: VAR(--maincolor);
}

.vgerror .loginusername:focus + span + .usernamePlaceholder, .vgerror #txtpwd:focus + span + .passwordPlaceholder, #newlogin .vgerror #txtSecurityAnswer:focus + span + .forgotPlaceholder, #newlogin .vgerror #CaptchaInputText:focus + span + .captchaPlaceholder {
    color: #d50000;
}

#newlogin .vgerror #txtSecurityAnswer + span + .forgotPlaceholder.placeholdertop, .vgerror .loginusername + span + .usernamePlaceholder.placeholdertop, .vgerror #txtpwd + span + .passwordPlaceholder.placeholdertop,
.vgerror .captchaPlaceholder.placeholdertop {
    color: #d50000;
}

.login #newlogin .box {
    width: 87%;
    margin-left: 50px;
}

.vgLangs {
    border-radius: 7px;
    padding: 0% 0% 0% 0%;
    background-color: #ffffff;
    width: 100%;
    display: table;
    height: 100px;
    margin: 0px auto;
}

.vgvirtualkey {
    width: 35%;
    margin: 0px auto;
}

.vglangdropdown {
    float: left;
    width: 30%;
    position: relative;
}

.vgvirtualkey .Login_virtual {
    /*float:left;*/ /*commented by vivekanandhan for otp remove rememberme align issue on 20240703*/
    float: right;
    width: 15%;
    text-align: right;
    margin-top: 2px;
    margin-bottom: 15px;
    font-family: Roboto-Medium;
}

#newlogin .Login_forgot {
    float: left;
    margin-top: 7px;
    width: 50%;
}


#newlogin .inner-box .close {
    float: none;
    margin-left: 10px;
    vertical-align: sub;
}


.vglangdropdown > select {
    width: 100%;
    /*height: 28px;*/
    background: white;
    color: black;
    border: 0px;
    border-radius: 3px;
    padding: 8px;
}




#newlogin .inner-box .btn.pull-right {
    background: VAR(--subcolor14);
    height: 36px;
    margin-bottom: 2px;
}

.login #newlogin .box .form-actions {
    clear: both;
}

#newlogin .v_key {
    border: 1px solid VAR(--maincolor);
    background-color: VAR(--maincolor);
    color: white;
    border-radius: 3px;
}

#newlogin .tblvirtualkey td input {
    border: 1px solid VAR(--maincolor);
    background-color: VAR(--maincolor);
    color: white;
    border-radius: 3px;
}


#newlogin .Login_forgot a {
    text-transform: none;
    color: VAR(--maincolor);
    font-size: 14px;
    font-weight: 500;
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif
}

.vglangdrop {
    cursor: pointer;
    color: #202124;
}



    .vglangdrop > i {
        margin: 0px 3px;
    }

.vghideDrop, .vgforhideDrop {
    min-width: 150px;
    max-height: 905px;
    display: none;
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    outline: 1px solid transparent;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    z-index: 2000;
    background: white;
    left: 0px;
}

.vgforhideDrop {
    display: block;
    top: 27px;
    position: absolute;
    width: 100%;
    border-radius: 15px;
}

    .vghideDrop > .vglang, .vgforhideDrop > .vgforlang {
        padding: 8px 26px 8px 16px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16.8px;
        cursor: pointer;
        color: #202124;
    }

.vglang:hover, .vgforlang:hover {
    background: #eeeeee;
}


#newlogin .VirtualHead {
    text-align: left;
    text-transform: none;
    /*color: #9b8e7e;*/
}

#newlogin .VirtualKeydiv {
    margin-top: 5px;
}

.login #newlogin .box .form-group {
    margin-bottom: 35px;
}

.placeholdertop {
    -moz-transform: scale(.75) translateY(-39px);
    transform: scale(.75) translateY(-39px);
    color: VAR(--maincolor);
}


.vgLangs .form-actions {
    float: left;
    width: 55%;
    margin: 0px;
    background-color: white;
    border: 0px;
    padding: 0px;
    text-align: right;
    color: #757575;
    font-size: 12px;
    color: #9b8e7e;
}

    .vgLangs .form-actions .pull-left {
        float: right !important;
    }


#newlogin .Login_virtual label.lblclr {
    color: #757575;
    text-transform: none;
    font-size: 12px;
    font-family: Roboto-Medium;
}

#QuestionAnswerdiv .form-group {
    margin-bottom: 10px !important;
}

.header {
    display: none !important;
}

#newlogin .Logincontainer > .box {
    margin-bottom: 40px;
}

.login #newlogin .box {
    width: 85%;
}




.login #newlogin.wrapper {
    background-color: white !important;
}

#newlogin #QuestionAnswerdiv .close1 {
    margin: 5px;
    vertical-align: sub;
}




#newlogin #txtSecurity {
    background: white;
    border: none !important;
    cursor: default !important;
    color: #2F3C4D;
    outline: none !important;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    padding: 6px 0px;
}

.vgmailid {
    margin: 0px auto;
    text-align: center;
    /*border: 1px solid VAR(--subcolor14);*/
    border: 1px solid #ddd;
    border-radius: 35px;
    padding: 0px 4px;
    cursor: pointer;
    margin-bottom: 30px;
    position: relative;
    align-items: center;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    padding: 5px 15px 5px 5px;
    outline: none;
    max-width: 100%;
    cursor: default;
}

.vgdp {
    background: #303e45;
    border-radius: 13px;
    color: white;
    height: 20px;
    min-width: 20px;
    margin-right: 8px;
    background: VAR(--subcolorblk);
}

#profileIdentifier {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #3c4043;
    font-weight: 570;
}

.vgdropicon {
    margin-left: 4px;
}



#newlogin #QuestionAnswerdiv #btnreset.btn {
    margin-top: 30px;
    width: 15%;
    background: VAR(--maincolor);
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    float: right;
    border: none;
}

#prev {
    float: left;
    margin-top: 30px;
    width: auto;
    background: VAR(--maincolor);
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    border: none;
    padding: 0px 5px;
}

    #prev > i {
        margin-right: 5px;
    }

#vghead_id {
    text-align: center;
    max-width: 569px;
}


#newlogin span.field-validation-error, #newlogin .help-block {
    margin-top: 4px;
    display: inherit;
    color: #d50000;
    font-size: 12px;
    font-weight: 400;
}


.forgothint {
    margin: 3px 0px;
}

.loader {
    width: 100%;
    height: 5px;
    position: relative;
    top: -44px;
    border-radius: 50%;
    overflow: hidden;
}

@-moz-keyframes loader-animation {
    0% {
        width: 10%;
    }



    30% {
        width: 100%;
    }


    100% {
        left: 0%;
        width: 100%;
    }
}



@-webkit-keyframes loader-animation {
    0% {
        width: 10%;
    }



    30% {
        width: 100%;
    }


    100% {
        left: 0%;
        width: 100%;
    }
}


@keyframes loader-animation {
    0% {
        width: 10%;
    }



    30% {
        width: 100%;
    }


    100% {
        left: 0%;
        width: 100%;
    }
}

.loader .bar {
    position: relative;
    background-color: var(--subcolor14);
    height: 5px;
    top: 0px;
    -webkit-animation: loader-animation 1s infinite;
    -moz-animation: loader-animation 1s infinite;
    -o-animation: loader-animation 1s infinite;
    animation: loader-animation 1s infinite;
    display: none;
    border-radius: 50%;
}

@media screen and (min-width:672px) {
    #newlogin .Logincontainer, .vgLangs {
        width: 672px;
    }

    .vgvirtualkey {
        width: 100%;
    }

    #newlogin .Logincontainer > .box {
        margin-bottom: 40px;
    }
}


@media screen and (max-width:671px) {
    #newlogin .Logincontainer, .vgLangs {
        width: 99%;
    }

    .vgvirtualkey {
        width: 99%;
    }

    .vgLangs .form-actions {
        width: 70%;
    }

    .login #newlogin .box {
        margin: 0px auto;
    }

    #newlogin #QuestionAnswerdiv .btn {
        width: 20%;
        margin-bottom: 10px;
    }
}


#newlogin .login {
    padding: 0;
}

#txtpwd, #Username {
    cursor: text !important;
    background-color: #fff;
    color: #000;
    /* color: #9b8e7e;*/
}

#newlogin #uniform-remember_me {
    font-weight: normal;
}


.vgvirtualkey .form-actions .checkbox {
    font-weight: normal;
    margin: 0px;
    margin-top: 2px !important;
    font-family: Roboto-Medium;
}

#newlogin .loginContent {
    padding: 2.6em 0px;
    margin-top: -2.6%;
}

#newlogin.noCaptcha .loginContent {
    padding: 5em 0px;
}

.login {
    background-color: #fff;
    padding-top: 60px;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.login .box {
    background-color: #fff;
    float: left;
    box-shadow: none;
}

.box .tembox_div {
    width: 100% !important;
    min-height: 10px;
    padding: 0;
}


.login .box form {
    padding: 0;
    margin: 0;
}


.Human-icon {
    width: 64px;
    height: 64px;
    background-color: #fff;
    text-align: center;
    width: 100%;
}

img {
    border: 0;
}

.login .box .form-title {
    margin: 0px 0px 27px 0px;
    color: VAR(--subcolorblk);
    font-weight: 570;
    text-align: center;
    /*color: #9b8e7e;*/
}

.login .box .form-group {
    margin: 0;
    padding: 0;
}

.Virtual_container .VirtualHead label {
    color: var(--subcolor13);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}

.keyButton {
    text-align: center;
    width: 40px;
    height: 26px;
}

.backbutton {
    float: left;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 26px;
}

.clearbutton {
    float: left;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 26px;
}

.capslockbutton {
    float: left;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 26px;
}

.login.activation .widget.box {
    width: 51%;
}

.mixedbutton {
    float: left;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 26px;
}

.v_key {
    float: left;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: 28px;
    margin: 0px 0px 3px 0px;
}

.tblvirtualkey td {
    padding: 0px 3px 0px 0px;
}

.tblvirtualkey {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.VirtualKeydiv {
    width: 670px;
    margin: 15px auto;
}

.Virtual_container {
    width: auto;
    margin: 40px auto;
    clear: both;
}

.Login_virtual label.lblclr {
    font-size: 14px;
    font-weight: 400;
}

div.checker {
    margin-top: 1px;
}

.Vginputbox .col-md-8 {
    padding: 0px
}

.vgactive {
    background: #e6e6e6;
}

span.vgdp {
    margin: 0px;
    margin-top: -1px;
    display: block;
    height: auto;
    width: auto;
    background: transparent;
}


#checkuser > i {
    margin-right: 5px;
}

.vgerrormsg {
    display: none;
}

.vgerror .vgerrormsg {
    display: block;
}

.field-validation-error > i {
    margin-right: 5px;
    font-size: 14px;
}

#show-hide-pwd {
    position: absolute;
    top: 18px;
    right: 18px;
    cursor: pointer;
    float: right;
    width: 22px;
    height: 20px;
}

    #show-hide-pwd #show-hide-pwd-txt, #show-hide-captcha-txt {
        visibility: hidden;
        width: 92px;
        background: rgba(97,97,97,0.902);
        color: #FFFFFF;
        text-align: center;
        position: absolute;
        right: -35px;
        font-size: 10px;
        padding: 5px 8px 6px;
        z-index: 5000;
        border-radius: 2px;
        top: 39px;
        opacity: 0;
        -webkit-transform: scale(0,0.5) translateY(-50px);
        transform: scale(0,0.5) translateY(-50px);
        -webkit-transition: opacity 70ms linear;
        transition: opacity 70ms linear;
    }

    #show-hide-pwd:hover #show-hide-pwd-txt, #captcha-reload:hover #show-hide-captcha-txt {
        visibility: visible;
        opacity: 1;
        pointer-events: none;
        -webkit-transform: scale(1,1) translateY(0);
        transform: scale(1,1) translateY(0);
        -webkit-transition: transform 200ms cubic-bezier(0.24,1,0.32,1),opacity 50ms linear;
        transition: transform 200ms cubic-bezier(0.24,1,0.32,1),opacity 50ms linear;
    }

#show-pwd-img {
    position: absolute;
    width: 22px;
    height: 20px;
    background: url('../img/show-hide-password.png');
    background-position: -1px -2px;
}

.password-hide-img {
    background-position: 23px -2px !important;
}

.divpop.form-group.captcha-block {
    display: flex;
    user-select: none;
}

#captcha-txtbox, .captcha.Vginputbox {
    /*    width:50%;*/
}

#CaptchaImage {
    height: 54px;
    width: 214px;
}

#captcha-txtbox {
    height: 100%;
    border: 1px solid gainsboro;
    margin-right: 35px;
}

    #captcha-txtbox .icon-refresh { /**Changes by Priya G 20220315*/
        font-size: 20px;
        margin: 0px 15px;
        vertical-align: middle;
        cursor: pointer;
        position: relative;
        top: 15px;
    }

#captcha-reload { /**Changes by Priya G 20220315*/
    position: relative;
    height: 55px;
    float: right;
    cursor: pointer;
}

#show-hide-captcha-txt {
    width: 100px;
    right: -40px;
}

.icon.icon-ok.icon-large {
    display: none;
}

.newnotify.customTheme .colorful-inner {
    background-color: #ff9800 !important;
    width: auto !important;
    box-shadow: 1px 1px 5px rgb(255 255 255 / 39%) !important;
}

.newnotify.customTheme {
    width: auto !important;
    max-width: 515px;
}

#CaptchaInputText {
    text-transform: uppercase;
}

.newnotify.customTheme.warning .colorful-inner {
    background-color: #ff2020 !important;
    width: auto !important;
}

.newnotify.customTheme.success .colorful-inner {
    background-color: #32A21B !important;
    width: auto !important;
}

.newnotify.customTheme .icon {
    height: 100%;
    display: block;
    float: left;
    margin: 0 !important;
    order: 1;
    margin-right: 15px !important;
}

.newnotify.customTheme .colorful-inner {
    display: flex !important;
    align-items: center;
}

.colorful-inner .icon_txt {
    order: 2;
}
/*****Added by Priya G 20220315 for captcha work*/
.captcha-block a:focus {
    float: left;
    width: 45px;
    height: 55px;
    position: absolute;
    left: 46.6%;
    outline-offset: 0;
    outline: 5px auto VAR(--maincolor);
}

    .captcha-block a:focus #show-hide-captcha-txt {
        visibility: visible;
        opacity: 1;
    }

/*Captcha design changes by Ranjitkumar R - 20240624*/
.captcha-block {
    display: flex;
}

    .captcha-block .divpop {
        width: 48%;
    }

.login #newlogin .box .form-group.captcha-input-div {
    margin-left: 5%;
}

.capcha_imgbox {
    width: 83%;
    border-right: 1px solid gainsboro;
}

.capcha_main_container {
    display: flex;
    border: 1px solid gainsboro;
    border-radius: 5px;
}

.captcha_refreshbox {
    width: 17%;
    float: right;
    cursor: pointer;
}

.refresh_img_box {
    width: 92%;
    margin: 0;
    padding-right: 4px;
}

.captcha_refreshbox .icon-refresh {
    font-size: 20px;
    margin: 0px 15px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    top: 15px;
}

/*end*/
/*****end*****/
.newnotify.customTheme .icon {
    margin-right: 0px !important;
    margin-left: 15px !important;
    font-size: 12px !important;
}

    .newnotify.customTheme .icon.icon-warning {
        margin-right: 12px !important;
        margin-left: 3px !important;
    }

.login #newlogin .box .form-group.captcha-block .form-group {
    margin-bottom: 0px;
}
/*UAEPASS............start........*/
.UAEPassBtn {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 3px;
    padding: 8px 0px;
}

.UAE_hr_line {
    border-bottom: 1px solid #afafaf;
    line-height: 0.1em;
    margin: 22px 0 22px;
    text-align: center;
    width: 100%;
    opacity: 1;
    padding-left: 0px;
}

.UAEPassBtn > div {
    float: left;
    width: 100%;
}

.UAE_hr_line span {
    background-color: #fff;
    padding: 0 10px;
    color: #555555;
    font-family: roboto-medium;
    font-size: 18px;
}

.UAE_Pass_img_box {
    float: left;
    height: 45px;
    width: 100%;
    position: relative;
}

.UAEPassBtn > div {
    float: left;
    width: 100%;
}

.UAEPassBtn_img {
    height: 55px;
    width: 310px !important;
    background-repeat: no-repeat;
    float: left;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin: auto;
    position: absolute;
    cursor: pointer;
    border: 0;
    box-shadow: none;
    padding: 0px;
    background-color: #a42320;
}

.UAEPassBtn_img {
    background-image: none;
    background-repeat: no-repeat;
    float: left;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin: auto;
    position: absolute;
    cursor: pointer;
    border: 0;
    box-shadow: none;
    padding: 0px;
    background-color: transparent;
    width: 300px !important;
    height: 44px;
    border-radius: 10px;
    font-family: 'Roboto-Bold';
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border: 2px solid #808080;
}

.UAEbtn_text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -8px;
}

.UAEPassBtn_img span {
    font-family: 'Roboto-Bold';
    font-size: 18px;
    color: #000;
}

.UAEPassBtn_img span {
    letter-spacing: 1px;
}

.UAEsignin_ico {
    height: 42px;
    width: 42px;
}

.UAEPassBtn_img span {
    font-family: 'Roboto-Bold';
    font-size: 18px;
    color: #000;
}

#newlogin #chkuae_error {
    position: absolute;
    top: auto;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

#newlogin #chkuae_error {
    display: inline-block;
    float: left;
    width: 100%;
    font-size: 15px;
    margin-top: 10px;
    font-family: 'Roboto-Medium';
}

.field-validation-error > i {
    margin-right: 5px;
    font-size: 14px;
}

#newlogin.noCaptcha .loginContent {
    padding: 3em 0px;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

.UAEPassBtn_img:focus {
    outline: 2px solid rgba(0, 172, 117, 0.3) !important;
}

.UAEPassBtn_img:focus {
    outline: none;
}
/*UAEPASS............end........*/
/*bootstrap version change*/

#newlogin .inner-box .btn.pull-right {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: normal;    
    line-height: 16px;
    text-align: center;
    color: #fff;
    border-color: #46b8da;
}

.Login_forgot a {
    text-decoration: none;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

#newlogin .VirtualHead, .vglangdrop {
    font-size: 14px;
}

    .vglangdrop > i {
        font-size: 12px;
    }

#newlogin.noCaptcha .loginContent {
    font-size: 14px;
}

i#Arrow_Icon {
    font-size: 10px;
}

#newlogin .loginContent {
    display: none;
}

.login {
    padding: 60px 0px 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}

#newlogin .Logincontainer {
    margin: 0px 0px 10px
}

.vgLangs {
    height: auto;
}

.vgvirtualkey .Login_virtual, .Virtual_container {
    margin-bottom: 0px;
}

.loader {
    top: -18px;
}

.captcha_refreshbox .icon-refresh {
    top: 17px;
    right: 6px;
}

.btn_container {
    display: flex;
    justify-content: center;
}

.log_btns {
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    padding: 2px 0px 2px;
    width: 200px;
    height: 39px;
    background-color: VAR(--maincolor);
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    text-align: center;
    font-style: normal;
    font-stretch: normal;
    border: 1px solid;
    border-color: VAR(--maincolor);
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.arrow_ico {
    margin-left: 10px;
    font-size: 23px;
    margin-top: 6px;
}

.recorder .shj-userman {
    width: 227px;
}

.form_btn.recorder.ManuvalDownload2 {
    width: 39px;
    position: absolute;
    right: 50px;
    bottom: 34px;
}

.form_btn {
    width: 39px;
    position: absolute;
    right: 50px;
    bottom: 100px;
}

.log_btns.form_btn.Registrationformshj {
    bottom: 170px;
}

.Registrationformshj .shj-userman {
    width: 220px;
}

.SHJBOTTOMLOGO {
    position: relative;
}

    .SHJBOTTOMLOGO img {
        position: ABSOLUTE;
        TOP: 8px;
        LEFT: 0;
        MAX-WIDTH: 50%;
        MAX-HEIGHT: 50%;
        MARGIN: AUTO;
    }

.ico_form {
    width: 100%;
    height: 100%;
    /*background-image: url('../../../../../Icons/login/commit_wht_ico.svg');*/
    background-image: url('../img/commit_wht_ico.svg');
    background-repeat: no-repeat;
    background-size: 58%;
    background-position: center;
}

.shj-userman {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 0px;
    padding-top: 10px;
    width: 350px;
}

    .shj-userman span {
        color: #9d9784;
        font-size: 35px;
    }

.sub_form {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 80px;
    padding-top: 5px;
    display: none;
}

    .sub_form ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 2px solid #c5c5c5;
        border-radius: 10px;
        color: #6b6868;
        font-size: 14px;
        width: auto;
        text-align: start;
        white-space: nowrap;
        background-color: #fff;
    }

        .sub_form ul li {
            padding: 14px;
            display: flex;
            align-items: center;
            border-bottom: 2px solid #c5c5c5;
        }

            .sub_form ul li:last-child {
                border-bottom: none;
            }


.commit_form .sub_ico {
    /*background-image: url('../../../../../Icons/login/commit_gray_ico.svg');*/
    background-image: url('../../../rtl/assets/img/commit_gray_ico.svg');
}

.emitarate_user .sub_ico {
    background-image: url('../../../../../Icons/login/emirate_user_ico.svg');
}

.sub_ico {
    width: 20px;
    height: 25px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.active_select .sub_txt, .commit_form:hover .sub_txt, .emitarate_user:hover .sub_txt {
    color: VAR(--maincolor);
}

.commit_form.active_select .sub_ico, .commit_form:hover .sub_ico {
    /*  background-image: url('../../../../../Icons/login/commit_red_ico.svg');*/
    background-image: url('../img/commit_blue_ico.svg');
}

.emitarate_user.active_select .sub_ico, .emitarate_user:hover .sub_ico {
    background-image: url('../../../../../Icons/login/emirate_user__redico.svg');
}

.arrow_blk {
    position: absolute;
    top: 30px;
    right: 72px;
    width: 15px;
    height: 15px;
    background: white;
    border-top: 2px solid #c5c5c5;
    border-right: 2px solid #c5c5c5;
    transform: rotate( 45deg );
}

.btn_container1 .arrow_blk {
    top: 15px;
    left: 30px;
    transform: rotate( -45deg );
}

.btn_container1 {
    position: relative;
}

.register_btn1 .sub_txt {
    font-weight: bold;
    color: #6b6868;
    display: block;
    padding-top: 3px;
    padding-left: 30px;
}

.register_btn1 .sub_form {
    left: 5px;
    padding: 3px 0px 0px 0px;
    top: 90%;
    padding-top: 23px;
    width: 215px;
}

/*.register_btn1:hover .sub_form {
    display: block;
}*/

.form_btn:hover .sub_form {
    display: block;
}

/*......................Common confiramtion popup*/
/*  CONFIRMATION POPUP  */
.suggest-common-confirm-popup {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    padding-left: 0px;
    z-index: 99999;
}

.opendefaultpan .suggest-common-confirm-popup, body.openLeftDetails .suggest-common-confirm-popup {
    padding-left: 408px;
}

.Suggest-common-confirm-Container {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.common-confirm-popup {
    width: 400px;
    height: 350px;
    position: absolute;
    background: white;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-box-shadow: 0 5px 26px 0 rgba(0,0,0,0.22),0 20px 28px 0 rgba(0,0,0,0.30);
    box-shadow: 0 5px 26px 0 rgba(0,0,0,0.22), 0 20px 28px 0 rgba(0,0,0,0.30);
    text-align: center;
    color: white;
}

.common-confirm-header {
    height: 150px;
    background-color: #f7ae43;
    padding: 7px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.common-confirm-header-text {
    width: 100%;
    font-size: 25px;
    text-align: left;
    text-align: center;
    clear: both;
}

.common-confirm-content {
    height: 150px;
    color: black;
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    width: 430px;
    max-width: 430px;
    padding: 25px;
}

.common-close-confirm {
    margin-right: 10px;
    float: right;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    text-shadow: 0 1px 0 #fff;
    width: 22px;
    height: 22px;
    background-image: url('../../../images/angular/ico/leftside_circle.png');
    margin-right: 10px;
    float: right;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    text-shadow: 0 1px 0 #fff;
    width: 22px;
    height: 22px;
}

    .common-close-confirm:hover {
        opacity: 0.7;
    }

.common-confirm-main-text {
    padding: 0px 15px;
    display: block;
}

.common-confirm-btns {
    width: 100%;
    height: 100%;
}

.common-confirm-yes, .common-confirm-no {
    width: 80px;
    height: 30px;
    background-color: #f7ae43;
    margin: 0px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.common-confirm-footer {
    height: 30px;
    text-align: center;
}

.common-confirm-close {
    display: none;
    margin-left: 75px;
}

.common-confirm-icon {
    width: 60px;
    height: 60px;
    background: no-repeat url(../../../../images/dashboard/map/confirm.png);
    background: no-repeat url('../../../images/dashboard/map/confirm.png');
    background-size: 60px;
    clear: both;
    margin: 7px auto;
}

.common-confirm-yes:hover, .common-confirm-no:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}

.confirm-icon {
    width: 60px;
    height: 60px;
    background: no-repeat url(../../Images/ico/confirm.png);
    background: no-repeat url('../../../images/dashboard/map/confirm.png');
    background-size: 60px;
    clear: both;
    margin: 7px auto;
}

.close-svg-ico {
    background-image: url(../../../../images/dashboard/map/close-ico.svg);
    background-image: url('../../../images/dashboard/map/close-ico.svg');
    background-position: 1px 1px;
}

.tooltip-dark {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 19px;
    background: #494949;
    color: #fff;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    display: none;
}
/*Common confirmation popup .....................................*/



/*......................Common confiramtion popup*/
/*  CONFIRMATION POPUP  */
.suggest-common-confirm-popup, .suggest-common-fence-confirm-popup {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    padding-left: 0px;
    z-index: 99999;
    background-color: #0000006e;
}

.opendefaultpan .suggest-common-confirm-popup, body.openLeftDetails .suggest-common-confirm-popup {
    padding-left: 408px;
}

.opendefaultpan .suggest-common-fence-confirm-popup, body.openLeftDetails .suggest-common-fence-confirm-popup {
    padding-left: 408px;
}

.Suggest-common-confirm-Container {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.common-confirm-popup {
    width: 400px;
    height: 350px;
    position: absolute;
    background: white;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-box-shadow: 0 5px 26px 0 rgba(0,0,0,0.22),0 20px 28px 0 rgba(0,0,0,0.30);
    box-shadow: 0 5px 26px 0 rgba(0,0,0,0.22), 0 20px 28px 0 rgba(0,0,0,0.30);
    text-align: center;
    color: white;
}

.common-confirm-header {
    height: 150px;
    background-color: #f7ae43;
    padding: 7px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.common-confirm-header-text {
    width: 100%;
    font-size: 25px;
    text-align: left;
    text-align: center;
    clear: both;
}

.common-confirm-content {
    height: 150px;
    color: black;
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    width: 430px;
    max-width: 430px;
    padding: 25px;
}

.common-close-confirm {
    margin-right: 10px;
    float: right;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    text-shadow: none;
    width: 22px;
    height: 22px;
}

    .common-close-confirm:hover {
        opacity: 0.7;
    }

.common-confirm-main-text, .fence-common-confirm-main-text {
    padding: 0px 15px;
    display: block;
}

.common-confirm-btns {
    width: 100%;
    height: 100%;
}

.common-confirm-yes, .common-confirm-no, .fence-common-confirm-yes {
    width: 80px;
    height: 30px;
    background-color: #f7ae43;
    margin: 0px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.common-confirm-footer {
    height: 30px;
    text-align: center;
}

.common-confirm-close {
    display: none;
    margin-left: 75px;
}

.common-confirm-icon {
    width: 60px;
    height: 60px;
    background: no-repeat url(../../../../images/dashboard/map/confirm.png);
    background-size: 60px;
    clear: both;
    margin: 7px auto;
}

.common-confirm-yes:hover, .common-confirm-no:hover, fence-common-confirm-yes:hover {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}



.confirm-icon {
    width: 60px;
    height: 60px;
    background: no-repeat url('../../../images/dashboard/map/confirm.png');
    background-size: 60px;
    clear: both;
    margin: 7px auto;
}

.common-confirm-yes, .common-confirm-no, .fence-common-confirm-yes {
    width: 80px;
    height: 30px;
    background-color: #f7ae43;
    margin: 0px 4px;
    margin-top: 0px;
    margin-right: 4px;
    margin-bottom: 0px;
    margin-left: 4px;
    border-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    font-weight: 600;
    color: white;
    border: 0px
}

/*Common confirmation popup .....................................*/
.common-close-confirm:hover .cls_tooltip {
    display: block;
}

.cls_tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 1003;
    left: 94%;
    top: 28px;
    transform: translateX(-50%);
    white-space: nowrap;
}

    .cls_tooltip::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        margin-left: -5px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #494949;
    }

.log_btns.form_btn.Registrationformshj {
    bottom: 170px;
}

.Registrationformshj .shj-userman {
    width: 220px;
}

.SHJBOTTOMLOGO {
    position: relative;
}

    .SHJBOTTOMLOGO img {
        position: ABSOLUTE;
        TOP: 8px;
        LEFT: 0;
        MAX-WIDTH: 50%;
        MAX-HEIGHT: 50%;
        MARGIN: AUTO;
    }

.shj-userman {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 47px;
    padding-top: 1px;
    width: 175px;
}

    .shj-userman span {
        color: #9d9784;
        font-size: 21px;
    }

.Human-icon.SHJLogo.shjlogochng {
    overflow: initial !important;
}

    .Human-icon.SHJLogo.shjlogochng img {
        position: relative;
        top: -180px;
    }

#newlogin.noCaptcha .loginContent.shjloginContent {
    padding: 2.6em 0px;
}

#newlogin .loginContent.shjloginContent {
    margin-top: 13px;
}
/*#newlogin.noCaptcha .loginContent.shjloginContent {
    margin-top: 100px;
}*/
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
    border-color: var(--subcolor6);
}
/*Captcha design changes by Ranjitkumar R - 20240624*/
.captcha-block {
    display: flex;
}

    .captcha-block .divpop {
        width: 48%;
    }

.login #newlogin .box .form-group.captcha-input-div {
    margin-left: 5%;
}

.capcha_imgbox {
    width: 83%;
    border-right: 1px solid gainsboro;
}

.capcha_main_container {
    display: flex;
    border: 1px solid gainsboro;
    border-radius: 5px;
}

.captcha_refreshbox {
    width: 17%;
    float: right;
    cursor: pointer;
}

.refresh_img_box {
    width: 92%;
    margin: 0;
    padding-right: 4px;
}

.captcha_refreshbox .icon-refresh {
    font-size: 20px;
    margin: 0px 15px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    top: 15px;
}

/*end*/
.login #newlogin .box .form-group.captcha-block .form-group {
    margin-bottom: 0px;
}

.capcha_main_container {
    height: 55px;
}
/*.icon-refresh:before {
    color: #9b8e7e;
}*/
Human-icon.SHJLogo.shjlogochng {
    overflow: initial !important;
}

.Human-icon.SHJLogo.shjlogochng img {
    position: relative;
    /*    top: -180px;*/
}

.wrapperSHJMain .vglangdrop {
    cursor: pointer;
    color: #9b8e7e;
}
/*#newlogin.wrapperSHJMain .Logincontainer {
    margin: 5.5% auto;
}*/
#newlogin.wrapperSHJMain .Login_virtual label.lblclr {
    color: #9b8e7e;
}

#newlogin.wrapperSHJMain .VirtualHead {
    color: #9b8e7e;
}

.login .wrapperSHJMain .box .form-title {
    color: #9b8e7e;
}

#newlogin.wrapperSHJMain #txtSecurity {
    color: #9b8e7e;
}

.wrapperSHJMain #profileIdentifier {
    color: #9b8e7e;
}

.wrapperSHJMain .vghideDrop > .vglang, .wrapperSHJMain .vgforhideDrop > .vgforlang {
    color: #9b8e7e;
}
/*bootstrap version change*/

/*add by Hari sankar for net8 warning icon issue 20250719*/
.newnotify.customTheme .icon.fa-triangle-exclamation {
    margin-right: 12px !important;
    margin-left: 3px !important;
    font-size:16px !important;
}
/*end*/