/*@*sayli 13-08-20*@*/
/*@*Sayli 03/09/2020 02:30 PM*@*/
/*@*Sayli 19/09/2020 05:00 PM*@*/
/*sayli 23-12*/
/*sayli 10-3*/
/*body {
    font-family: 'open sans', Arial, Helvetica, sans-serif;
}
*/
/*sayli -12-03-2021 */
/*sayli -16-03-2021 */
/*Priya -27-03-2021 Resp code adedd */
/*sayli -8-05-2021 */
/*@*Priya 24-7-2021*@ */
/*@*Priya 26-7-2021*@ */
/*akanksha kamble 4-2-22 logo responsive*/
/**akanksha kamble 30-04-22 NEW PAGE DESIGN*/
/*akanksha kamble login page responsive changes*/
/*akanksha kamble 5-03-2022 epariyojna logo width increase*/
/*Akanksha kamble 20-6-22 clear chache changes*/
/*/akanksha kamble responsive changes*/

:root {
    --skinColor;
    --textColor: #fff;
    --GradientShade;
    --Shade1;
    --Shade2;
    --Shade3;
    /*  --Navbar;*/
    --TabColor;
    --Activesidebar;
    --Activemenu;
    --TableHeader: #5d76ef;
    --TableBody;
    --Sidebar;
    --Sidebarheader;
    --SidebarSecondlvl;
    --SidebarThirdlvl;
    --SidebarFourthlvl;
    --bgColor;
    --bgTransparent;
    /*    --FontFamily: Arial;*/
    --FontStyle;
    --FontWeight: 400;
    --FontSize: 14px;
    --FontSizeH1: 40px;
    --FontSizeH2: 32px;
    --FontSizeH3: 28px;
    --FontSizeH4: 24px;
    --FontSizeH5: 20px;
    --FontSizeH6: 16px;
    --FontSizespan: 14px;
    --bgImage:;
    --MenuBg: #122a55;
    --GridFont: 15px;
    --LoginPagebackgrnd: linear-gradient(180deg, #345ae4f5 29%, #348be4f5 50%, #fff 85%, #fff 210px);
}

body {
    font-family: var(--FontFamily) !important; /*Arial !important;*/
    cursor: inherit !important;
    font-style: var(--FontStyle) !important;
    font-weight: var(--FontWeight) !important;
    font-size: var(--FontSize) !important;
    background: rgb(110,102,255);
    background: var(--LoginPagebackgrnd) !important;
    height: 100vh;
}

.diamond2 {
    background: linear-gradient(-45deg,#185a9d 50%, #43cea2 16% ); 
}

.diamond3 {
    background: linear-gradient(-45deg,rgb(253 255 149) 50%, rgb(214 15 71) 16% );
}

.diamond10 {
    background: linear-gradient( -45deg, rgb(255 255 255) 50%, #870e8c 16%);
}

.diamond11 {
    background: linear-gradient(-45deg,rgb(242 255 18) 50%, #37e82b 16% );
}

.theme {
    display: inline-block;
    border: 3px solid #d1d0d0;
    width: 20px;
    height: 20px;
    border-radius: 24%;
    margin-left: 10px;
    cursor:pointer
}

.ThemeButtonFooter {
    opacity: 0.7;
}

/*.bodyBg {*/
    /*background-image: url(../../images/login/gradient.png);*/
    /*background-image: url('../../Images/Refinery/Bongaigaon 1.jpg');*/
    /*background-image: url('../../Images/Login/loginBackground.jpg');
    height: 100vh;
    opacity: 0.7;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    width: 100vw;*/
    /*z-index: -1;*/
/*}*/

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.login-wrap {
    background-color: white;
    border-color: white !important;
    /* overflow-y: auto */
}

.refBG {
    background: url("../../Images/Login/LoginFooter.png?v='+@HttpContext.Current.Application['v']+'");
    background-repeat-y: no-repeat;
    background-size: auto 82px;
    background-repeat-x: repeat;
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: 86px;
    background-color: #f0f8ff;
    opacity: 0.7;
    box-shadow: 0 0 32px 0 #fff;
}

.reFlectionImg {
    width: 100%;
 
    opacity: 0.5;
}

.LogoResizeDoodle {
    height: 90px;
    width: auto;
}

.login-wrap, .carousel-item {
    height: 58vh !important;
    border: 4px;
}

.CarouselResp .container {
    padding: 0px;
    border: 0px solid;
    border-style: ridge;
    border-color: #09090933;
    border-radius: 0px;
}

#hero {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 120px);
}

header {
}

.epms-login {
    color: black;
    border: 1px solid #555;
    border-radius: 5px;
    height: 40px;
    padding-left: 5px;
    height: 37px;
    /* background-color: #fff; */
    border-radius: 2px;
    margin-top: 2% !important;
}

.epms-logo {
    background-color: #fff;
    border-radius: 0px;
    width: 211px;
    padding: 6px 9px 11px 9px;
    height: 65px;
}

.mgbtm3 {
    margin-bottom: 3%;
}

.mgtp-8 {
    margin-top: -8% !important;
}

.login-wrap {
    border: 0px solid #ddd;
    padding-bottom: 2%;
    border-radius: 6px 0px 0px 6px;
    box-shadow: 0 0 6px 0px #606366;
}

label {
    color: #000;
}

.login-btn {
    background-color: #08a4ed /* #0079bf*/ !important;
    color: #fff !important;
    width: 40% !important;
    font-weight: 600 !important;
}
.GraphTheme3 .login-btn {
    background-color: #dc3545 /* #0079bf*/ !important;
}
.GraphTheme4 .login-btn {
    background-color: #e252e8 /* #0079bf*/ !important;
}
.GraphTheme9 .login-btn {
    background-color: #4bec3f /* #0079bf*/ !important;
}
    .iocltxt {
        margin-top: 0%;
        font-size: 21px;
        /* margin-left: 2% !important;*/
        width: 100%;
        text-align: center;
    }


.e2epms-paras {
    height: 26px;
    float: right;
}

footer.footer {
    padding: 0px 2px;
    background-color: aliceblue;
    border-top: 1px solid #ddd;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}


.Contact-us {
    position: absolute;
    color: #fff !important;
    background-color: rgba(0,0,0,0.12);
    z-index: 999;
    border: 1px solid;
    right: 15px;
    top: 2vh;
    padding: 6px 9px;
    border-radius: 0px;
    cursor: pointer;
}

    .Contact-us:hover {
        color: #325d92 !important;
        background-color: rgba(255,255,255,0.89);
    }

.modal {
    opacity: inherit !important
}

.contact-border {
    width: 291px;
    height: 6px;
    background: radial-gradient(#adadad80 10px, transparent 80%);
    margin: 0px auto;
    margin-top: -3px;
    border-radius: 80%;
    margin-bottom: 3%;
}

.contact-txt {
    color: rgb(37 100 136);
}

.contact-support {
    margin-top: 0px;
    padding-top: 15px;
    margin-left: 36px;
    padding-left: 0px;
    list-style: none;
    margin: 0% 10% 5% 10%;
}

    .contact-support li i {
        padding: 10px 0px;
        font-size: 18px;
        text-align: center;
        min-width: 42px;
        border-right: 1px solid #bbb;
        border-radius: 50%;
        background: rgb(1 121 191);
        color: #fff;
        margin-right: 2%
    }

    .contact-support li span {
        letter-spacing: 2px;
        color: #000;
        font-family: arial;
        margin-left: 0%;
    }

.contactmodel-wrap {
    width: 36% !important;
    max-width: 44% !important;
    top: 9%;
}

.contact-model {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    height: auto !important;
    display: inline-block;
    text-align: center;
    padding: 0px !important;
}

    .contact-model img {
        height: 48px;
        width: auto;
        margin: 0px auto;
        background: #ffffffa6;
        padding: 5px 15px;
    }

.closemodel:active {
    outline: none
}

.closemodel {
    margin: 7px 4px 0px -36px !important;
    color: #fff !important;
    opacity: 0.8 !important;
    border-radius: 4px !important;
    padding: 0px 5px 4px 5px !important;
    background-color: #0279bf !important;
}

.responsiveLink {
    display: none
}

.desktoplink {
    display: block
}

.projName-dups {
    display: none
}

.epms-logoUpdated {
    /*background-color: unset !important;*/
    background-color: #fff;
    border-radius: 0px;
    width: auto;
    /* padding: 6px 9px 11px 9px;*/
    height: 75px;
}

/*Responsive Css Adedd*/
/*Responsive Css Adedd*/

@media(max-width:768px) {
    .contactmodel-wrap {
        max-width: 100% !important;
        width: 96.5% !important;
    }

    .responsiveLink {
        display: block;
        margin-top: -8px;
    }

    .desktoplink {
        display: none
    }

    .Contact-us {
        color: #2c59bd !important;
        background-color: #8e9ad600 !important;
        font-size: 11px;
        right: 3px;
        top: 2vh;
        padding: 4px 5px;
    }

}

@media (max-width:1200px) {
    .CarouselResp {
        padding: 0px !important;
        opacity: 0.4 !important;
        /* margin: -28px !important;*/
        position: absolute !important;
        /* top: 20% !important;*/
    }


    .responsive-row {
        position: relative !important;
    }

    .LoginpageResp {
        z-index: 999 !important;
    }

    .input.captchaInput {
        color: black !important;
        opacity: 0.1;
    }

   
}

@media screen and (max-width: 993px) and (min-width: 200px) {


    .modal-header.contact-model {
        padding: 0px !important;
        height: 51px !important;
    }

    .contact-model img {
        height: 47px;
        width: 46%;
    }

    .contact-model .close {
        padding: 3px !important;
        margin: -2rem -2rem 0rem auto;
    }

    .mtop {
        margin-top: 6px;
    }

    .mtopattch {
        margin-top: 16px !important
    }
}

@media only screen and (max-device-width:750px) and (orientation:landscape) {

    .epms-logo {
        height: 59px !important;
    }

    #hero {
        margin-top: 1rem !important;
    }

    .Dropdownmargin {
        margin-top: 3rem !important;
    }

    .responsiveLink {
        display: block;
        margin-top: 0px;
    }
}

@media (max-width:580px) {
    .loginpageLogo {
        height: 50px;
        margin-right: 8px;
        width: 105px;
    }

    .loginpageLogoFirst {
        height: 50px;
        margin-left: 8px;
        width: 105px;
    }

    .Textsize {
        font-size: 20px !important;
        margin-left: unset !important;
    }

    #hero {
        height: unset !important;
        overflow-y: unset !important;
        overflow-x: unset !important;
    }
   
   /* .refBG {
        position: inherit;
        bottom: 20px !important;
        width: 100%;
        height: 81px !important;
    }*/

    .reFlectionImg {
        width: 100%;
        /* height: 15px; */
        /* background: url(e2epms2-Copy.png); */
        transform: rotate( 180deg );
        background-size: unset !important;
        margin-bottom: unset !important;
        opacity: 0.5;
    }

    .margintop {
        margin-top: unset !important;
    }

    .IoCLLogo {
        height: 60px
    }

    .login-wrap {
        box-shadow: none;
        margin-top: 0px !important
    }

    .login-wrap, .carousel-item {
        height: 84vh !important
    }

    .dispinline {
        display: inline !important;
    }

    .textcenter {
        text-align: left !important;
    }

    .projName, .reFlectionImg {
        display: none
    }

    .projName-dups {
        display: block
    }

    .e2epms-paras {
       height: 16px;
        margin-left:auto
    }
    .theme{
        height:16px;
        margin-left:auto
    }

}

@media (max-width:768px) {
}

@media screen and (max-width:350px) and (min-width:249px) {

    .contact-support {
        margin-top: 0px;
        padding-top: 15px;
        margin: 0% 3% 5% 3%;
    }

        .contact-support li span {
            letter-spacing: 0px !important;
        }


    .LogoResizeDoodle {
        width: 31% !important;
    }
}

@media(max-width:400px) {
    .LogoResizeDoodle {
        width:36% !important;
        height: 75px;
    }

    .Textsize {
        font-size: 18px !important;
        margin-left: unset !important;
    }

    .epms-logoUpdated {
        width: 145px;
        padding: 0px;
        height: 31px;
    }
}

@media(max-width:250px) {
    .contact-support li span {
        letter-spacing: 1px !important;
    }

    .contact-support li i {
        padding: 7px 0px;
        font-size: 7px;
        min-width: 20px;
    }

    .LogoResizeDoodle {
        width: 41% !important;
    }

    .Textsize {
        font-size: 15px !important;
        margin-left: unset !important;
    }

    .contact-support {
        padding-top: 8px;
        margin: 0% 1% 3% 2%;
    }
}

.ConfirmPassScreen {
    width: 500px;
    background-color: #f3f3f3;
    margin: auto;
    margin-top: 10%;
    box-shadow: -6px 6px 7px #dddddda6;
}

.modal-header {
    background-color: var(--TabColor) !important;
    color: white;
}

.modal .modal-title {
    text-align: center;
    /*text-transform: capitalize;*/
}

.partitionedInput {
    padding: 0 !important;
    padding-left: 15px !important;
    letter-spacing: 42px;
    border: 0px !important;
    background-image: linear-gradient(to left, black 70%,rgba(255,255,255) 0%);
    background-size: 50px 1px;
    background-repeat: repeat-x;
    background-position-x: 35px;
    width: 220px !important;
    min-width: 220px !important;
    background-position: bottom;
}

.divInner {
    left: 0;
    position: sticky;
}

.divOuter {
    width: 190px;
    overflow: hidden
}

#TimerOTP, .ResetBtn i {
    font-size: var(--FontSizespan);
}

.sendOTPtBtn:hover, ResetBtn:hover {
    color: white;
}


/*Notification*/

.alert {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
    z-index: 999999 !important
}

.alert-danger {
    background-color: #ff3547 !important;
    color: white !important;
    border-color: #db3748 !important;
}

[data-notify="progressbar"] {
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 5px;
}

.alert-success {
    color: white !important;
    background-color: #00c851 !important;
    border-width: 0px !important;
}

.alert-warning {
    color: white !important;
    background-color: #fb3 !important;
    border: 0px !important;
}

.alert-info {
    color: white !important;
    background-color: #33b5e5 !important;
    border: 0px !important;
}

.alert [data-notify="icon"] {
    margin-right: 8px !important;
    font-size: 16px !important;
}

.bootbox.modal .btn {
    margin: 1px 5px;
    padding: 4px 12px;
    font-size: 13px;
}

.bootbox.modal .modal-body {
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}

.bootbox.modal .modal-footer {
    flex-direction: row-reverse;
    margin-left: auto;
    /* width: 100%; */
    border: 0;
}


/*Notification End*/

.versionLable {
    font-size: var(--FontSizespan);
    letter-spacing: 0.5px;
    color: var(--MenuBg);
}

.divBorder {
    border-bottom: 1px solid;
    height: 12px;
    overflow: visible;
    margin-bottom: 11px;
}
/*Raj Added*/


.IOCL-logo {
    background-color: #fff;
    border-radius: 0px;
    width: 110px;
    padding: 6px 9px 11px 9px;
    height: 110px;
}

.main {
    background: linear-gradient(to bottom, #005aa7 20%, #fffde4 90%);
}

.LogoResizeDoodle {
    /*  background-color: #fff;*/
    border-radius: 0px;
    /*width: 450px;*/
    padding: 6px 9px 11px 9px;
    /*height: 125px;*/
}
.CarouselImg {
    height :-webkit-fill-available;
}

.LoginpgArrangmnt {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}


.loginboxborder {
    min-height:50vh;
    
    align-items:center;
    border-radius:25px;
    border:solid 5px #c1d4ee;
    background:#4e77a54f;
    /*box-shadow:0 0 32px 0 #d8d7d7;*/
   /*backdrop-filter:blur(4px);*/
    position:absolute;
    top:23%;
   /* left:30%;*/
    /*transform:translate(-50%, -50%);*/
    z-index:99;
    height:inherit;


}



.headerbgcolor {
    background: #f0f8ff;
}

.forgotcolorchange{
    color:#fff;

}
    .forgotcolorchange:hover {
        color: #67b2d8;
    }

@media(max-width:768px) {
    .loginheadertitle {
        font-size: 1.5rem !important;
    }
}

@media(max-width:820px) {
    .loginboxborder {
        min-height: 36vh;
    }

    .loginboxborderupperrow {
        margin-top: 33% !important
    }
}

@media(min-width:768px){
    /*.loginboxborderupperrow {
        margin-top: 10% !important
    }*/

   
}


@media(max-width:450px) {
    .backgroundresponsive{
        height:100%!important
    }

    .containerresponsive{
        position:absolute;
        top:30%
    }
}
@media screen and (max-width: 993px) and (min-width: 200px)
{
.containerresponsive {
    position: absolute !important;
    top: 44% !important
}
}

@media(max-width:2560px) {
    .loginboxborder {
        min-height: 39vh;
    }
}