body 
{
    font-family: 'Poppins', sans-serif;
}
section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

.content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    background: #fff;
}
.left, .left:before {
    width: 70%;
}
.left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../App_Themes/NewTheme/images/shutterstock_196590461_reduced.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
 .left::before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        background: -webkit-linear-gradient(bottom, rgb(69, 187, 255,0.8), rgb(45, 122, 167,0.8));
 }
.left img {
        width: 100%;
}

.main-title {
    color: #ececec;
}
.login-left-content-text {
    width: 100%;
}
.login-title {
    color: #45bbff !important;
    float: left;
    width: 100%;
    font-size: 24px !important;
}
.right {
    margin: 20px auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.right .inputbox label {
        color: #999999;
        font-size: 18px;
}
.inputbox {
    margin: 30px 0px;
    width: 100%;
}
.login_section input {
    margin-top: 4px;
    padding: 10px 8px;
    width: 100%;
    border: none;
    border-radius: 2px;
    border-bottom: 2px solid #dbdbdb;
    font-size: 20px;
}
.right .logo h2 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 20px;
}
.create {
    display: flex;
    justify-content: center;
    width: 360px;
}
.create button {
        margin-top: 5px;
        width: 250px;
        height: 40px;
        border: none;
        border-radius: 25px;
        background: #45bbff;
        color: #fff;
        font-size: 20px;
        transition: all 0.5s ease;
}
button {
    width: 160px;
    height: 35px;
    padding: 5px;
    border-radius: 25px;
    background: none;
    border: 2px solid #000;
}
/* Responsiveness:Start */
@media screen and (max-width:1300px) 
{
    .left, .left::before
    {
        width:40%;
    }
    .right
    {
        width:60%;
    }
}
@media screen and (max-width:1200px) 
{
    .login-left-content-text {
        left: 5%;
    }
        .login-left-content-text h1 {
            font-size: 16px;
        }
}
@media screen and (max-width:567px) {
    .content {
        flex-direction: column;
        width: 100%;
        height: fit-content;
    }

    .left, .left:before {
        height: 250px;
        width: 100%;
    }
}
/* Responsiveness:End */



/*commented by jyoti*/

/*body{margin: 0;}
.loadingStyle{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #F7F7F7;opacity: 70;z-index:1;filter: alpha(opacity=70);}
.mainDiv{width: 100%;background-color: #114c6e;padding: 0px 0px 10px 0px;height: auto;}
.div1240{width: 1240px;height: inherit;text-align: justify;background-color: #F2FAFD;}
.LoginBox{background-image: url(login/loginbox.jpg);background-repeat: no-repeat;height: 209px;width: 265px;text-align: justify;}
#header{height: 152px;width: 100%;background-repeat: no-repeat;}
#divContent{margin: 10px 60px 0px 60px;}
#divLeft{width: 25%;margin: 0px 0px 0px 0px;float: left;text-align: center;}
#divRight{width: 75%;margin: 0px 0px 0px 0px;float: right;}
#divRight h2,#divRight h3{margin: 0px 0px 0px 0px;font-family: Calibri;}
#divRight h4{font-family: Calibri;}
#Footer{background-image: url(login/footerSlice.jpg);background-repeat: repeat-x;height: 100px;}
.loginTextbox{background-color: Transparent;border: 0;width: 180px;text-align: center;font-family: Calibri;font-size: 10pt;}
.lblLogin{height: 35px;color: Red;font-family: Verdana;font-size: 10pt;}
.textIndicator_poor{background-color: gray;color: #ffff00;margin-left: 15px;}
.textIndicator_weak{background-color: gray;color: #00ffff;margin-left: 15px;}
.textIndicator_good{background-color: gray;color: #ADD8E6;margin-left: 15px;}
.textIndicator_strong{background-color: gray;color: #90EE90;margin-left: 15px;}
.textIndicator_excellent{background-color: gray;color: #00ffdd;margin-left: 15px;}
.textIndicator_Handle{width: 16px;height: 14px;overflow: Hidden;cursor: help;background-image: url(images/Question.jpg);}
.gry-icon .fa{color:#B5B5B5}*/

/*commented by jyoti*/

/* simple popup */
#Div_Ifrm_Popup {
    position: absolute !important;
    top: 0 !important;
}
.simple-popup-content label.label-auto {width: auto;}
.simple-popup-backgrond {background-color: rgba(189, 189, 189, 0.5);height: 100%;width: 100%;float: left;position: fixed;/*position: absolute;*/z-index: 105;}
.simple-popup-container {background: #fff;float: left;position: absolute;border: 1px solid #ccc;border-radius: 5px;width: 80%;box-shadow: 0px 0px 5px 0px #c1c1c1;-webkit-animation: pop-swirl 0.5s ease forwards;}
.simple-popup-content {padding: 5px;float: left;width: 100%;box-sizing: border-box;-moz-box-sizing: border-box;}
.confirm-button {box-sizing: border-box;-moz-box-sizing: border-box;padding: 10px 0;text-align: center;}
.clspop {position: absolute;right: 10px;top: 10px;cursor: pointer;}
.simple-popup-header {padding: 10px;background: #f7f7f7 !important;color: #777 !important;border-bottom: 1px solid #ebebeb;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.simple-popup-footer {padding: 10px;background: #f7f7f7 !important;color: #777 !important;border-top: 1px solid #ebebeb;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;position:absolute;bottom:0;width:100%;box-sizing:border-box;-moz-box-sizing:border-box}

/* /simple popup */

/* new login screen */

/*commented by jyoti */

/*body,html,form,.mainDiv{height:100%;font-family: 'Segoe UI';}
.login-container,.login-left,.login-right{float:left;}
.login-container{width:100%;height:100%}
.login-left{width:calc(100% - 520px);background:#ccc;height:100%;background-repeat: no-repeat;background-position: center;background-size: cover;position:relative;}
.login-right{width:520px;background:#fff;height:100%;border-radius:2px;padding:40px;box-sizing:border-box;position:relative}
.login-field{float:left;width:100%;position:relative;border-bottom: 2px solid #dbdbdb;margin-bottom: 35px;}
.login-field label{float:left;width:100%;color: #999999;font-size:18px;}*/
/*.login-field input,.login-field button{float:left;width:100%;padding:0 2px;height:40px;line-height: 1.2;outline: none;border: none;font-size: 20px;border-radius: 5px;}
.focus-input{position: absolute;display: block;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;}
.focus-input::before{content: "";display: block;position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;background: #d5007d;background: -webkit-linear-gradient(45deg, #4d7fb5, #90c2f9);background: -o-linear-gradient(45deg, #4d7fb5, #90c2f9);background: -moz-linear-gradient(45deg, #4d7fb5, #90c2f9);background: linear-gradient(45deg, #4d7fb5, #90c2f9);}
.login-field input:focus + .focus-input::before,.login-field button:focus + .focus-input::before {width: 100%;}*/

/*commented by jyoti end */

.login-left::before{content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #45bbff;background: -webkit-linear-gradient(bottom, rgb(69, 187, 255,0.8), rgb(45, 122, 167,0.8));background: -o-linear-gradient(bottom, rgb(69, 187, 255,0.8), rgb(45, 122, 167,0.8));background: -moz-linear-gradient(bottom, rgb(69, 187, 255,0.8), rgb(45, 122, 167,0.8));background: linear-gradient(bottom, rgb(69, 187, 255,0.8), rgb(45, 122, 167,0.8));}
.login-button{background: #45bbff;color:#fff;transition: all 0.5s ease;}
.login-button:hover,.login-button:focus{background: #3bb5fb}
.login-title{color:#45bbff;float:left;width:100%;font-size:24px;}
.logo{float:left;width:100%;text-align:center}
.login-section,.frgt-section{float:left;width:100%}
.login-section{transition:all 0.5s ease-in-out}
.login-left-content{position:relative;width:100%;height:100%}
.login-field input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,.login-field button:-webkit-autofill {background-color: rgb(255, 255, 255) !important;background-image: none !important;color: rgb(0, 0, 0) !important;}
.ssl-img{position:absolute;left:0;bottom:0;text-align:center}
h1.a{/* for chrome and safari*/-webkit-animation-duration: 0.5s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 0.5s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 0.5s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 0.5s;animation-name: slidein;position:relative}
h1.b{/* for chrome and safari*/-webkit-animation-duration: 1s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 1s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 1s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 1s;animation-name: slidein;position:relative}
h1.c{/* for chrome and safari*/-webkit-animation-duration: 1.5s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 1.5s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 1.5s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 1.5s;animation-name: slidein;position:relative}
h1.d{/* for chrome and safari*/-webkit-animation-duration: 2s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 2s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 2s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 2s;animation-name: slidein;position:relative}
h1.e{/* for chrome and safari*/-webkit-animation-duration: 2.3s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 2.3s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 2.3s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 2.3s;animation-name: slidein;position:relative}
h1.f{/* for chrome and safari*/-webkit-animation-duration: 2.6s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 2.6s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 2.6s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 2.6s;animation-name: slidein;position:relative}
h1.g{/* for chrome and safari*/-webkit-animation-duration: 2.8s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 2.8s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 2.8s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 2.8s;animation-name: slidein;position:relative}
h1.h{/* for chrome and safari*/-webkit-animation-duration: 3s;-webkit-animation-name: slidein;/*for firefox*/-moz-animation-duration: 3s;-moz-animation-name: slidein;/* for opera*/-o-animation-duration: 3s;-o-animation-name: slidein;/* Standard syntax*/animation-duration: 3s;animation-name: slidein;position:relative}

        @-webkit-keyframes slidein {
            from {
                left:-100%;
            }

            to {
                left:0;
            }
        }

        @-moz-keyframes slidein {
            from {
                left:-100%;
            }

            to {
                left:0;
            }
        }
         @-o-keyframes slidein {
            from {
                left:-100%;
            }

            to {
                left:0;
            }
        }
          @keyframes slidein {
            from {
                left:-100%;
            }

            to {
                left:0;
            }
        }
@keyframes pop-swirl {
  0% {
    transform: scale(0);
  }
  
  100% {
    transform: scale(1);
  }
}
.login-left-content-text{color: #b1ddff;position: absolute;left: 11%;top: 25%;}
.login-left-content-text h1{font-size: 22px;font-weight: normal;}
/*commented by jyoti start*/
/*@media only screen and (min-width : 1200) {
    .login-field label {font-size: 14px;}
    .login-field input,.login-field button {height:30px;font-size:16px;}
    .login-left-content-text h1{font-size: 20px;font-weight: normal;}
}
@media screen and (min-width: 1024px) and (max-width: 1366px)  {
    .login-field label {font-size: 14px;}
    .login-title{font-size:18px}
    .login-field input,.login-field button {height:30px;font-size:16px;}
    .logo img{width:180px;}
    .login-left-content-text h1{font-size: 18px;font-weight: normal;}
} 
@media screen and (min-width: 768px) and (max-width: 1023px)  {
    .login-field label {font-size: 14px;}
    .login-title{font-size:18px}
    .login-field input,.login-field button {height:30px;font-size:16px;}
    .logo img{width:180px;}
    .login-left-content-text h1{font-size: 20px;font-weight: normal;}
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
    .login-field label {font-size: 14px;}
    .login-title{font-size:18px}
    .login-field input,.login-field button {height:30px;font-size:16px;}
    .logo img{width:180px;}
    .login-left-content-text h1{font-size: 20px;font-weight: normal;}
}*/
/*commented by jyoti end*/
.left-footer{position:absolute;bottom:0;width:100%;padding:10px;font-size:12px;background: #45bbff;background: -webkit-linear-gradient(bottom, rgb(0, 0, 0,0.2), rgb(0, 0, 0,0.2));background: -o-linear-gradient(bottom, rgb(0, 0, 0,0.2), rgb(0, 0, 0,0.2));background: -moz-linear-gradient(bottom, rgb(0, 0, 0,0.2), rgb(0, 0, 0,0.2));background: linear-gradient(bottom, rgb(0, 0, 0,0.2), rgb(0, 0, 0,0.2));color:#fff;}
.left-footer a{text-decoration:none;color:#fff;}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus{-webkit-box-shadow: 0 0 0px 1000px #fff inset;transition: background-color 5000s ease-in-out 0s;}
#container {width: 300%;overflow: hidden;-webkit-transition: margin-left 500ms ease-in-out;-moz-transition: margin-left 500ms ease-in-out;-o-transition: margin-left 500ms ease-in-out;-ms-transition: margin-left 500ms ease-in-out;transition: margin-left 500ms ease-in-out;}
.section {width: 33.3333%;float: left;}

/* loading dots */
.loading{pointer-events:none}
.loading:after {content: ' .';animation: dots 1s steps(5, end) infinite;}
@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}
/* End loading dots */