html,
body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

.login-form {
    width: 500px;
    padding: 15px;
}

.input[type=text], .input[type=password] {
    color: #fff;
}

.input-field label {
    color: #fff;
}

/* label focus color */
.input-field input[type=text]:focus + label, .input-field input[type=password]:focus + label {
    color: #fff;
}

/* label underline focus color */
.input-field input[type=text]:focus, .input-field input[type=password]:focus {
    border-bottom: 1px solid #fff;
    box-shadow: 0 1px 0 0 #fff;
}

/* valid color */
.input-field input[type=text].valid, .input-field input[type=password].valid {
    border-bottom: 1px solid #fff;
    box-shadow: 0 1px 0 0 #fff;
}

/* invalid color */
.input-field input[type=text].invalid, .input-field input[type=password].invalid {
    border-bottom: 1px solid #fff;
    box-shadow: 0 1px 0 0 #fff;
}

.ie_pass_visible {
    position: absolute;
    bottom: 30px;
    cursor: pointer;
    right: 10px;
    color: #DDD;
}

.ie_pass_visible:hover {
    opacity: 0.7;
}

/* icon prefix focus color */
.input-field .prefix.active {
    color: #fff;
}

.center-btn {
    float: none !important;
}

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    color: #fff;
}

.error-card, .success-card, .template-loading-screen {
    display: none;
}

.card .card-content {
    padding: 15px !important;
}

.transparent {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Tablet */

/* iPad Pro */
@media (max-width: 1023px) {

    .login-form {
        width: 100%;
    }

}

/* end mobile */