body {
    background: rgb(16, 16, 44) url('/img/bg5.jpg') no-repeat fixed center center / cover;
    min-height: 100vh;
    font-family: 'Axia Web', Helvetica, Arial, sans-serif;
}

@media only screen and (min-width: 600px) {
    .card-form {
        margin: 100px auto 0 auto;
    }
}

.card-form input {
    display: block;
    box-shadow: none !important;
    border: 0 !important;
    background: linear-gradient(to right, #3f51b5, #3f51b5) right bottom no-repeat;
    background-size: 100% 2px !important;
    font-family: 'Axia Web';
    font-size: 20px;
}

    .card-form input:focus {
        display: block;
        background: linear-gradient(to right, #d500f9, #12a8f3) right bottom no-repeat;
    }

    .card-form input.valid:focus {
        display: block;
        border: 0 !important;
        background: linear-gradient(to right, #3cd73f, #12a8f3) right bottom no-repeat;
    }

    .card-form input.valid {
        display: block;
        border: 0 !important;
        background: linear-gradient(to right, #0E9688, #12a8f3) right bottom no-repeat;
    }

.card-panel form label {
    color: #9FAFFF;
    text-transform: capitalize;
    font-weight: normal;
    font-size: 18px;
    font-weight: 400;
}


.card-panel form input.valid + label.active {
    color: #0E9688;
}

.card-form input + label.active {
    font-weight: bold;
    font-size: 15px;
}

.card-panel form .input-field input:focus + label.active {
    color: #d500f9;
}

.card-panel form .input-field .valid:focus + label.active {
    color: rgb(60, 215, 63);
}

.text-danger {
    color: #e92662;
    font-weight: bold;
    font-size: 18px;
}

.form-group {
    padding: 0 10px;
}

.no-account {
    color: #9fafff;
    font-size: 18px;
    margin-bottom: -20px;
}

.dark-blue {
    background-color: rgba(12, 16, 32, 0.9);
    color: #b3c1e0;
}

.nav-bar.dark-blue {
    background-color: rgba(12, 16, 32, 0.75) !important;
}

.nav-wrapper {
    padding-left: 24px;
    padding-right: 18px;
}

.nav-wrapper ul li a {
    font-weight: bold;
    color: #b3c1e0;
    font-size: 16px;
    padding: 0 14px;
}

.nav-wrapper ul li {
    margin: 0;
}

nav {
    background-color: rgba(12, 16, 32, 0.75) !important;
}


.brand-logo {
    flex: 1 1 0%;
}

    .brand-logo img {
        -moz-box-flex: 1;
        margin-top: 16px;
        flex-grow: 1;
    }

.signin {
    height: 64px;
    font-size: 32px;
    font-weight: bold;
    font-family: 'Axia Web';
    letter-spacing: 0.15px;
    border-radius: 8px;
    margin: 20px 40px;
    margin: 40px 0px;
    width: 90%;
    padding: 0 20px;
}

    .signin:hover {
        box-shadow: 0px 0px 20px #0e9688;
    }

[type='checkbox'].filled-in:checked + span:not(.lever)::after {
    background-color: #3f51b5;
    border-color: #3f51b5;
}

.card-header h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 0px;
    text-transform: capitalize;
}

.dark-blue input {
    color: white;
}

.card-form {
    padding: 30px !important;
}

.remember {
    margin-top: 50px;
}

@media only screen and (max-width: 600px) {
    .card-form {
        padding: 15px !important;
        margin: 0;
        width: 100vw;
        position: absolute;
        left: 0;
    }
}

.remember {
    font-size: 18px;
}

.validation-summary-errors {
    margin-top: -20px;
    margin-bottom: -40px;
}

#LoginForm input:-webkit-autofill,
#LoginForm input:-webkit-autofill:hover,
#LoginForm input:-webkit-autofill:focus,
#LoginForm input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    transition-delay: 9999s;
    transition: background-color 5000s ease-in-out 0s !important;
}

    #LoginForm input:-webkit-autofill::first-line,
    #LoginForm input:-webkit-autofill:hover::first-line,
    #LoginForm input:-webkit-autofill:focus::first-line,
    #LoginForm input:-webkit-autofill:active::first-line {
        font-family: 'Axia Web' !important;
        font-size: 20px;
    }

@font-face {
    font-family: 'Axia Web';
    src: url('/fonts/axia_web_Regular.eot');
    /* IE9 Compat Modes */
    src: url('/fonts/axia_web_Regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/axia_web_Regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/axia_web_Regular.woff') format('woff');
    /* Pretty Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Axia Web';
    src: url('/fonts/axia_web_Bold.eot');
    /* IE9 Compat Modes */
    src: url('/fonts/axia_web_Bold.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/axia_web_Bold.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/axia_web_Bold.woff') format('woff');
    /* Pretty Modern Browsers */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Axia Web';
    src: url('/fonts/axia_web_black.eot');
    /* IE9 Compat Modes */
    src: url('/fonts/axia_web_black.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/axia_web_black.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/axia_web_black.woff') format('woff');
    /* Pretty Modern Browsers */
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Axia Web';
    src: url('/fonts/axia_web_Light.eot');
    /* IE9 Compat Modes */
    src: url('/fonts/axia_web_Light.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/fonts/axia_web_Light.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('/fonts/axia_web_Light.woff') format('woff');
    /* Pretty Modern Browsers */
    font-weight: lighter;
    font-style: normal;
}