.innerTable { border-right:1px solid #848484; border-left:1px solid #848484; border-top:1px solid #848484; background-color:#EFF5FB; font-weight: bold; } .innerTableTD { background-color: #FAFAFA; font-weight: bold; } .innerTable td { border-bottom:1px solid #848484; padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px; text-align: left; width: 12.5%; } .popup { background-color: white; height: 300px; width: 500px; border: 5px solid #666; position: absolute; visibility: hidden; padding: 5px; overflow: auto; z-index: 2; } .popup_bg { position: absolute; visibility: hidden; height: 100%; width: 100%; left: 0px; top: 0px; filter: alpha(opacity=70); /* for IE */ opacity: 0.7; /* CSS3 standard */ background-color: #999; z-index: 1; } .close_button { font-family: Verdana, Geneva, sans-serif; font-size: small; font-weight: bold; float: right; color: #666; display: block; text-decoration: none; border: 2px solid #666; padding: 0px 3px 0px 3px; } .header {width:100%;height:55px; background: rgba(0, 90, 120, 0.9);} .container { width: 100%; height: 100%; } .form-container { display: block; margin: 0 auto; margin-top: 120px; width: 400px; perspective: 1000; } .login-form { background: rgba(0, 90, 120, 0.7); border: 4px solid rgba(0, 90, 120, 0.9); border-radius: 8px; } .title { background: rgba(0, 90, 120, 0.9); color: #fff; font-family: 'Nunito', sans-serif; font-weight: normal; font-size: 2em; padding: 10px 10px 10px 20px; margin-top: 0; margin-bottom: 15px; } .logintitle { background: rgba(0, 90, 120, 0.9); color: #fff; font-family: 'Nunito', sans-serif; font-weight: normal; font-size: 1em; padding: 10px 10px 10px 20px; margin-top: 0; margin-bottom: 15px; } .form-input { padding: 5px; min-width: 50%; height: 20px; border-radius: 4px; border: none; font-family: 'Nunito', sans-serif; font-weight: normal; } textarea:focus, input:focus, button:focus { outline: 0; } .tooltip { width: 35%; background: rgba(6, 41, 61, 1); font-size: 0.8em; color: #fff; font-family: 'Nunito', sans-serif; font-weight: normal; margin-left: 10px; padding: 7px; border-radius: 5px; } .form-group { padding: 10px 10px 10px 20px; } .login-button { width: 100px; height: 30px; margin-bottom: 10px; border: none; border-radius: 4px; background-size: 500% 100%; background: rgba(6, 41, 61, 1); box-shadow: inset 0 0 0 0 rgba(20, 196, 148, 1); -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s; color: #fff; font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 0.8em; } .login-button:hover { box-shadow: inset 0 40px 0 0 rgba(20, 196, 148, 1); } .remember-checkbox { display: inline; position: relative; margin-left: 30px; } .remember-p { display: inline; position: relative; margin-left: 5px; color: #fff; font-family: 'Nunito', sans-serif; font-weight: 500; font-size: 0.8em; } .loading { background: rgba(0, 90, 120, 0.7); border: 4px solid rgba(0, 90, 120, 0.9); border-radius: 8px; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .login-form, .loading { position: absolute; width: 400px; height: 240px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 2s; transition: transform 2s; } .loading-spinner-large { margin-left: 130px; margin-top: 55px; font-size: 10px; position: fixed; text-align: center; display: none; border-top: 10px solid rgba(255, 255, 255, 0.2); border-right: 10px solid rgba(255, 255, 255, 0.2); border-bottom: 10px solid rgba(255, 255, 255, 0.2); border-left: 10px solid rgba(20, 196, 148, 1); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin-clockwise 1.1s infinite linear; animation: spin-clockwise 1.1s infinite linear; } .loading-spinner-small { margin-left: 160px; margin-top: 85px; font-size: 10px; position: fixed; text-align: center; display: none; border-top: 10px solid rgba(255, 255, 255, 0.2); border-right: 10px solid rgba(255, 255, 255, 0.2); border-bottom: 10px solid rgba(255, 255, 255, 0.2); border-left: 10px solid rgba(20, 196, 148, 1); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin-counter-clockwise 1.1s infinite linear; animation: spin-counter-clockwise 1.1s infinite linear; } .loading-spinner-large, .loading-spinner-large:after { border-radius: 50%; width: 120px; height: 120px; } .loading-spinner-small, .loading-spinner-small:after { border-radius: 50%; width: 60px; height: 60px; } @-webkit-keyframes spin-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin-counter-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes spin-counter-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }