html, body { min-height: 100vh; } body { font-weight: 400; position: relative; background:#edecec; } .login-content { height: 100%; overflow: hidden; } body.login-content { text-align: center; } body.login-content::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; width: 1px; } body.login-content::before { background: #419aef none repeat scroll 0 0; content: ""; height: 50%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0 } .login-container { display: inline-block; position: relative; vertical-align: middle; width:530px; } .login_form { background: #fff none repeat scroll 0 0; border-radius: 2px; box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27); padding: 35px 35px; margin-top:35px; position:relative; font-size:13px; } .login_form .form-group.form-md-line-input { /*margin-left: 130px;*/ padding: 0; } .login_form .input-group { margin-bottom: 10px; width:100%; } .login_form .col-form-label { margin-top: 6px; text-align: right; } .input-group-addon { border-width: 0 0 1px; min-width: 42px; } .input-group-addon { background-color: transparent; border: 1px solid transparent; border-radius: 2px; color: #000000; font-size: 13px; font-weight: normal; line-height: 1; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; width: 1%; } .input-group-addon { display: table-cell; } .login_form .md-checkbox { float: left; } .login_form .checkbox { margin: 5px 0 0 0; text-align: left; color:#5e5e5e; } .btn-login.btn:not(.btn-sm):not(.btn-lg) { line-height: 32px; } .btn-login i { font-size: 23px; transition: all 500ms ease 0s; color:#fff; } .waves-effect { -moz-user-select: none; cursor: pointer; display: inline-block; overflow: hidden; position: relative; } .login_form .col-offset-4 { margin-left: 33.3333% !important; } .waves-button, .waves-circle { line-height: inherit; } .waves-circle { border-radius: 50% !important; height: 2.5em; line-height: 2.5em; text-align: center; width: 2.5em; } .btn-login { background: #4caf50 none repeat scroll 0 0; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12) !important; height: 50px; position: absolute !important; right: -25px; top: 38%; transition: all 0.5s ease 0s; width: 50px; } .login_form .md-checkbox label > .box { border: 1px solid #cccccc; } .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus::after, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label::after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .form-control-focus::after, .form-group.form-md-line-input .form-control.focus:not([readonly]) ~ label::after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus::after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label::after { background:#419AEF; left: 0; visibility: visible; width: 100%; } .waves-button, .waves-circle img { transition: all 500ms ease 0s; } .waves-button:hover img, .waves-circle:hover img { transform:rotate(360deg); } .login-navigation { bottom: -45px; left: 0; list-style: outside none none; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; } .login-navigation > li { backface-visibility: hidden; color: #fff; cursor: pointer; display: inline-block; line-height: 16px; margin: 0 2px; min-height: 16px; min-width: 16px; text-transform: uppercase; transition: all 150ms ease 0s; vertical-align: top; border-radius: 100% !important; } .bgm-red { background-color: #f44336 !important; } .bgm-orange { background-color: #ff9800 !important; } .bgm-green { background-color: #4caf50 !important; } .bgm-teal { background-color: #009688 !important; } .login-navigation > li:not(:hover) { border-radius: 100%; font-size: 0; } .login-navigation > li:hover { border-radius: 10px !important; font-size: 8px; padding: 0 5px; } span.form-req-star { color: red; } /*-- responsive media query --*/ @media screen and (max-width:767px) { .login-container { padding: 15px 35px 25px 20px; width: calc(100% - 60px); } .login-content { overflow:auto; } .login_form .col-form-label { float: left; padding: 0; text-align: left; } .login_form .col-offset-4 { margin-left: 0 !important; } } @media screen and (max-width:480px) { .login_form { padding:30px; } }