@keyframes slideInFromTop { 0% { transform: translateY(-100%); }
  100% { transform: translateY(0); } }

body > .grid { height: 100%; }

.login-content .column { max-width: 400px; width: 100% !important; animation-duration: 0.5s; /* the duration of the animation */ animation-timing-function: ease-out; /* how the animation will behave */ animation-delay: 0s; /* how long to delay the animation from starting */ animation-iteration-count: 1; /* how many times the animation will play */ animation-name: slideInFromTop; /* the name of the animation we defined above */ }

.login-content .login-form, .login-content .forget-form { background: rgba(255, 255, 255, 0.8); border-radius: 8px !important; }

.login-content .login-form .login-header, .login-content .forget-form .login-header { color: white; font-size: 30px; font-family: monospace; margin-top: 10px; margin-bottom: 10px; }

.login-content .login-form .login-header .login-image, .login-content .forget-form .login-header .login-image { float: left; /*width: 110px;*/ height: 115px; margin-right: 5px; margin-top: .2em; }

.login-content .login-form .login-header .login-text, .login-content .forget-form .login-header .login-text { float: right; text-align: left; padding: .1em; }

.login-content .login-form .login-header .login-text .login-text-1, .login-content .forget-form .login-header .login-text .login-text-1 { margin-top: 5px; letter-spacing: .2em; }

.login-content .login-form .login-header .login-text .login-text-2, .login-content .forget-form .login-header .login-text .login-text-2 { font-size: 17px; letter-spacing: .34em; margin-top: -10px; }

.login-content .login-form .login-header-text, .login-content .forget-form .login-header-text { font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }

.login-content .login-form .login-field label, .login-content .forget-form .login-field label { color: #555 !important; text-align: left; }

.login-content .login-form .login-field input, .login-content .forget-form .login-field input { padding-left: 33px !important; }

.login-content .login-form .login-field .fa, .login-content .forget-form .login-field .fa { margin: 8px 2px 4px 10px; }

.login-content .login-form .login-recover-link, .login-content .forget-form .login-recover-link { color: #525e64 !important; }

.login-content .login-form .login-recover-link a, .login-content .forget-form .login-recover-link a { color: #00b5ad !important; }

.login-content .login-form .segment, .login-content .forget-form .segment { background: rgba(255, 255, 255, 0.18); border-radius: 8px; /*box-shadow: 1px 1px 1px 0px rgba(0, 181, 173, 0.23);*/ padding: 0px 2rem 2rem !important; }

.login-content .login-form .segment .submit, .login-content .forget-form .segment .submit { background-color: #87CEEB; color: #FFF; }

.ui.form .field { margin: 0em 0em 1.5em; }

.has-error .form-control { border-color: #e73d4a !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important; }

.has-error .help-block { text-align: left; }