.headerprogressbar [role="progressbarmaterial"][aria-busy="true"] { position:absolute; top:0; left:0; padding-top:8px; width:100%; background-color:#159756; -webkit-animation:preloader-background linear 3.5s infinite; animation:preloader-background linear 3.5s infinite; } .headerprogressbar [role="progressbarmaterial"][aria-busy="true"]::before,.headerprogressbar [role="progressbarmaterial"][aria-busy="true"]::after { display:block; position:absolute; top:0; z-index:2; width:0; height:8px; background:#afa; -webkit-animation:preloader-front linear 3.5s infinite; animation:preloader-front linear 3.5s infinite; content:''; } .headerprogressbar [role="progressbarmaterial"][aria-busy="true"]::before { right:50%; } .headerprogressbar [role="progressbarmaterial"][aria-busy="true"]::after { left:50%; } @-webkit-keyframes preloader-background { 0%,24.9% { background-color:#159756; } 25%,49.9% { background-color:#da4733; } 50%,74.9% { background-color:#3b78e7; } 75%,100% { background-color:#fdba2c; } } @keyframes preloader-background { 0%,24.9% { background-color:#159756; } 25%,49.9% { background-color:#da4733; } 50%,74.9% { background-color:#3b78e7; } 75%,100% { background-color:#fdba2c; } } @-webkit-keyframes preloader-front { 0% { width:0; background-color:#da4733; } 24.9% { width:50%; background-color:#da4733; } 25% { width:0; background-color:#3b78e7; } 49.9% { width:50%; background-color:#3b78e7; } 50% { width:0; background-color:#fdba2c; } 74.9% { width:50%; background-color:#fdba2c; } 75% { width:0%; background-color:#159756; } 100% { width:50%; background-color:#159756; } } @keyframes preloader-front { 0% { width:0; background-color:#da4733; } 24.9% { width:50%; background-color:#da4733; } 25% { width:0; background-color:#3b78e7; } 49.9% { width:50%; background-color:#3b78e7; } 50% { width:0; background-color:#fdba2c; } 74.9% { width:50%; background-color:#fdba2c; } 75% { width:0%; background-color:#159756; } 100% { width:50%; background-color:#159756; } } .headerprogressbar { position:relative; width:100%; height:auto; box-shadow:0 2px 2px rgba(0,0,0,0.2); background-color:transparent; display:block; left:0; right:0; margin:0px auto; } .progressnew { background-color:#e5e9eb; height:0.25em; position:relative; width:100%;position:absolute;top:0;display:none; } .progressnew-bar { animation-duration:3s; animation-name:width; background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55); *background-size:24em 0.25em; height:100%; position:relative; } .progressnew-shadow { *background-image:linear-gradient(to bottom,#eaecee,transparent); height:4em; position:absolute; top:100%; transform:skew(45deg); transform-origin:0 0; width:100%; } @keyframes width { 0%,100% { transition-timing-function:cubic-bezier(1,0,0.65,0.85); } 0% { width:0; } 100% { width:100%; } } .progress-indeterminate { position:absolute; height:4px; display:none; width:100%; background-color:#a2d4fb; border-radius:0px; background-clip:padding-box; margin:0px auto;z-index:3; overflow:hidden; top:0;left:0;right:0;} .progress-indeterminate.btmprbar{bottom:0;top:inherit;} .progress-indeterminate .determinate { position:absolute; background-color:inherit; top:0; bottom:0; background-color:#2196F3; transition:width .3s linear; } .progress-indeterminate .indeterminate { background-color:#2196F3; } .progress-indeterminate .indeterminate:before { content:''; position:absolute; background-color:inherit; top:0; left:0; bottom:0; will-change:left,right; -webkit-animation:indeterminate 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite; animation:indeterminate 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite; } .progress-indeterminate .indeterminate:after { content:''; position:absolute; background-color:inherit; top:0; left:0; bottom:0; will-change:left,right; -webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite; animation:indeterminate-short 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite; -webkit-animation-delay:1.15s; animation-delay:1.15s; } @-webkit-keyframes indeterminate { 0% { left:-35%; right:100%; } 60% { left:100%; right:-90%; } 100% { left:100%; right:-90%; } } @keyframes indeterminate { 0% { left:-35%; right:100%; } 60% { left:100%; right:-90%; } 100% { left:100%; right:-90%; } } @-webkit-keyframes indeterminate-short { 0% { left:-200%; right:100%; } 60% { left:107%; right:-8%; } 100% { left:107%; right:-8%; } } @keyframes indeterminate-short { 0% { left:-200%; right:100%; } 60% { left:107%; right:-8%; } 100% { left:107%; right:-8%; } }body { margin:0; padding:0; background-image:url(../../img/clm.jpg); background-position:center; height:100vh; } body:before{ content:""; position:absolute;top:0px; left:0px; background-color:#4c4968; width:100%; height:100%; } h1{ font-size:28px;} h2{ font-size:26px;} h3{ font-size:18px;} h4{ font-size:16px;} h5{ font-size:14px;} h6{ font-size:12px;} h1,h2,h3,h4,h5,h6{ color:#563D64;} small{ font-size:10px;} b,strong{ font-weight:bold;} a{ text-decoration:none; } a:hover{ text-decoration:underline; } .left { float:left; } .right { float:right; } .alignleft { float:left; margin-right:15px; } .alignright { float:right; margin-left:15px; } .clearfix:after,form:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .mainloginfrmrl{position:relative;} .containerfrmenl { margin:0px auto; position:relative; width:100%; } .mainloginfrmrl { display:block; margin:5% auto 0; padding:20px 30px; text-align:center; width:360px; background:#fff; border:1px solid #fff; border-radius:10px; overflow:hidden; -webkit-box-shadow:0 0 20px 0 rgb(0 0 0 / 19%); box-shadow:0 0 20px 0 rgb(0 0 0 / 19%); } .login-form{width:100%;} .leftimgfor{max-width:350px;width:100%;padding:34px 0px;} .leftimgfor img{max-width:300px;margin:0px 40px;} .maininputclbtn{width:100%; padding:0;margin-bottom:10px;} .mainloginfrmrl h1 { color:#4c4968; font-family:roboto; margin:0; padding:10px 0; font-weight:bold; font-size:20px; margin-bottom:15px; } .mainloginfrmrl h1:before,.mainloginfrmrl h1:after { content:""; height:1px; position:absolute; top:35px; width:27%; } .maininputcl { position:relative; } .login_page{ margin:0 auto; padding:25px 0 0; position:relative; text-align:center; text-shadow:0 1px 0 #fff; width:50%; } .login_page .form-group { float:left; width:100%} .mainloginfrmrl:after { -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); -ms-transform:rotate(2deg); -o-transform:rotate(2deg); transform:rotate(2deg); top:0; z-index:-1; } .mainloginfrmrl:before { -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); top:0; z-index:-2; } .mainloginfrmrl form input[type="text"],.mainloginfrmrl form input[type="password"] { -webkit-border-radius:0px; -moz-border-radius:0px; -ms-border-radius:0px; -o-border-radius:0px; border-radius:0px; -webkit-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset; -moz-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset; -ms-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset; -o-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset; box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; border:1px solid #c8c8c8; color:#777; font:13px Helvetica,Arial,sans-serif; margin:0 0 20px; padding:10px 0px 10px 10px; width:100%; } .mainloginfrmrl form input[type="text"]:focus,.mainloginfrmrl form input[type="password"]:focus { -webkit-box-shadow:0 0 2px #1976D2 inset; -moz-box-shadow:0 0 2px #1976D2 inset; -ms-box-shadow:0 0 2px #1976D2 inset; -o-box-shadow:0 0 2px #1976D2 inset; box-shadow:0 0 2px #1976D2 inset; background-color:#fff; border:1px solid #1976D2; outline:none; } #username { background-position:10px 10px !important } #password { background-position:10px -53px !important } .mainloginfrmrl form input[type="submit"] { border:1px solid #FF5732; color:#fff !important; font-size:14px; cursor:pointer; float:left; font:bold 15px Helvetica,Arial,sans-serif; height:45px !important; width:100%; border-radius:30px; background:#FF5732 !important; } .mainloginfrmrl form input[type="submit"]:hover { background:#4c4968 !important; border:none; color:#fff; } .mainloginfrmrl form div a { color:#203864; float:right; font-size:13px; margin-top:10px; display:block; width:100%; text-align:right; margin:10px 0; } .button { background:rgb(247,249,250); background:-moz-linear-gradient(top,rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%); background:-webkit-linear-gradient(top,rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%); background:-o-linear-gradient(top,rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%); background:-ms-linear-gradient(top,rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%); background:linear-gradient(top,rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa',endColorstr='#f0f0f0',GradientType=0 ); -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset; -ms-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset; -o-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset; box-shadow:0 1px 2px rgba(0,0,0,0.1) inset; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -o-border-radius:0 0 5px 5px; -ms-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; border-top:1px solid #CFD5D9; padding:15px 0; } .button a { background:url(../../img/8bcLQqF.png) 0 -112px no-repeat; color:#7E7E7E; font-size:17px; padding:2px 0 2px 40px; text-decoration:none; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .button a:hover { background-position:0 -135px; color:#00aeef; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .thumbnail { -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; border-radius:30px; width:150px; height:150px; margin:0 auto 20px; padding:12px 16px; border-top-left-radius:100%; border-top-right-radius:100%; border-bottom-left-radius:100%; border-bottom-right-radius:100%; box-sizing:border-box; box-shadow:0 1px 1px rgba(0,0,0,.05); } .loginleftmn,.loginrightmn { background-size:300px; background-repeat:repeat-y; } .tooltipmn{padding:10px;font-size:14px;margin-bottom:10px;} .loginfrmnm{margin-top:20px;display:block;} .minprogreabbr{position:relative;} .errorelement{display:none;margin:0px auto;padding:10px 0px;padding-top:0px;color:#118af4;-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;} .main_container {padding:0px;} .copyright { display:inline-block; margin:10px auto 0; text-align:center; width:100%; padding:0; } .heartcolor { color:#27b16d; cursor:pointer; width:15px; height:15px; display:inline-block; margin-top:3px; font-size:12px; } .centrum_logo {width:100%; display:inline-block; background:#1c59a8; margin-bottom:5px;} @media (max-width:360px) { .containerfrmenl {padding:20px;} .mainloginfrmrl {width:100%; padding:20px 10px;} .mainloginfrmrl h1 {font-size:20px;} .mainloginfrmrl form input[type="submit"] {width:100%;} .mainloginfrmrl form div a {text-align:center; float:none; padding:15px 0; display:inline-block;} } .toggle-password { position:absolute; top:17px; right:10px; font-size:18px; color:#203864; cursor:pointer; } body { background-image:url(../../img/bg-img.png) !important; } .loginlabel { position:absolute; top:-8px; font-size:11px; font-weight:200; left:40px; background:#fff; padding:0 2px; color:#4c4968; } input.logininput[type="text"],input.logininput[type="email"],input.logininput[type="password"] { height:50px !important; font-size:15px !important; font-weight:600 !important; letter-spacing:.4px; padding-left:40px !important; border-radius:5px !important; border:1px solid #4c4968 !important; color:#000 !important; background:#fff !important; } .logininput::placeholder { color:#b9b9b9; font-size:12px; } input:-internal-autofill-selected { appearance:menulist-button; background-color:rgb(255,255,255) !important; background-image:none !important; color:-internal-light-dark(black,white) !important; } input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-box-shadow:0 0 0 30px white inset !important; } .inputicon { position:absolute; left:10px; font-size:18px; color:#4c4968; top:13px; } .poweredby { display:flex; justify-content:center; align-items:center; font-size:12px; font-weight:600; font-family:unset; color:#999; margin-top:25px; } .poweredby img { height:22px; margin-left:5px; } .loginttl { position:relative; margin:15px; } .loginttl h2 { font-size:30px; font-weight:600; color:#b1b1b1; margin:0; margin-bottom:5px; } .loginttl p { font-size:13px; color:#b9b9b9; font-weight:600; margin-bottom:15px; } .progress-indeterminate { background-color:#ffffff; } .logo_file img{ height:48px; } .progress-indeterminate .indeterminate{ background:#FF5732; }