body { /* background: url("../../images/bg.jpg") no-repeat center center fixed; */ background-color: #142939; background-size: cover; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 300; margin: 0; color: #666; } .g_id_signin{ display:flex; align-items:center; margin-top:5px; justify-content:center; } /* Typography */ h1#title { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 2em; color: white; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); margin: 0 auto; padding-top: 100px; text-align: center; position: relative; top: 0px; } h1#title span span { font-weight: 400; } h2 { text-transform: uppercase; color: white; font-weight: 400; letter-spacing: 1px; font-size: 1.4em; line-height: 2.8em; } a { text-decoration: none; color: #666; } a:hover { color: #aeaeae; } p.small { font-size: 1em; color: #2d516b; margin: 20px 0 0; } /* Layout */ .container { margin: 0; } .top { margin: 0; padding: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */ } .login-box { background-color: white; max-width: 340px; margin: 0 auto; position: relative; top: 80px; padding-bottom: 30px; border-radius: 5px; box-shadow: 0 5px 50px rgba(0, 0, 0, 0.4); text-align: center; } .login-box .box-header { background-color: #2d516b; margin-top: 0; border-radius: 5px 5px 0 0; } .login-box label { font-weight: 700; font-size: .8em; color: #888; letter-spacing: 1px; text-transform: uppercase; line-height: 2em; } .login-box input { margin-bottom: 20px; padding: 8px; border: 1px solid #ccc; border-radius: 2px; font-size: .9em; color: #888; } .login-box input:focus { outline: none; border-color: #665851; transition: 0.5s; color: #665851; } .login-button { margin-top: 0px; border: 0; border-radius: 2px; color: white; padding: 10px; text-transform: uppercase; font-weight: 400; font-size: 0.7em; width:180px; letter-spacing: 1px; background-color: #2d516b; cursor: pointer; outline: none; } .forget-button { margin-top: 0px; border: 0; border-radius: 2px; padding: 10px; text-transform: uppercase; font-weight: 400; font-size: 0.7em; letter-spacing: 1px; font-weight: 400; color: #007bff; background-color: transparent; cursor: pointer; outline: none; color: #007bff; background-color: transparent; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .selected { color: #665851 !important; transition: 0.5s; } /* Animation Delay */ #logo { -webkit-animation-duration: 1s; -webkit-animation-delay: 2s; } .login-box { -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; } .mask { position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); } #customBtn { display: inline-block; background: white; color: #444; width: 190px; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; } #customBtn:hover { cursor: pointer; } span.label { font-family: serif; font-weight: normal; } span.icon { background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span.buttonText { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the */ font-family: 'Roboto', sans-serif; }