body{background:#F7F7F7;} .errorelement{display:none;margin:20px auto;padding:10px;border-radius:2px;color:#1b63b1;font-weight:bold;} .heartcolor{ color:#27b16d; cursor:pointer; width:15px; height:15px; display:inline-block; margin-top:3px; font-size:12px; } .heartcolor:hover { -webkit-animation:r21 0.4s ease-out infinite; -moz-animation:r21 0.4s ease-out infinite; animation:r21 0.4s ease-out infinite; } @-webkit-keyframes r21 { from { font-size:14px } to { font-size:16px } } @-moz-keyframes r21 { from { font-size:14px } to { font-size:16px } } @keyframes r21 { from { font-size:14px } to { font-size:16px } } .copyright{ display:block; margin:15px auto 0; text-align:center; width:100%; } .login_content h1:before,.login_content h1:after { content:""; height:1px; position:absolute; top:10px; width:12%; } .login_form { z-index:22; } .registration_form,.login_form { max-width:325px; margin:8% auto 0; display:block; text-align:center; border:1px solid #fff; -webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); padding:15px; } .registration_form { z-index:21; display:none; width:100%; opacity:1 !important; } #content form .submit,.login_content form input[type=submit] { margin-left:0px; } #passwordnew{margin-top:10px;} .mainprogressbarforall{margin:10px auto;display:none;} .login-form h1 {text-align:center; font-size:24px; padding-bottom:20px;} .forgot_passwd {width:100%; margin-top:15px;} .footerlogo {margin-bottom:15px; max-width:100%;} .to_register {color:#333;text-decoration:underline; padding-top:3px;} .to_register:hover{color:#333;} .navbar-top {padding-top:0;} .centrum_logo {width:100%; display:inline-block; background:#1c59a8; margin-bottom:5px;} .field-icon { position:absolute; right:7px; top:12px; }.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%; } }