/* RESET */
a,
abbr,
acronym,
blockquote,
body,
cite,
code,
dd,
div,
dl,
dt,
fieldset,
form,
html,
iframe,
img,
label,
legend,
li,
object,
ol,
p,
pre,
q,
small,
span,
strike,
sub,
ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

li,
ol,
ul {
    list-style: none;
}

/* TYPO */
h1 {
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 3rem;
}

h2 {
    font-weight: 700;
    font-size: 2.1rem;
    margin-bottom: 1rem;
}

h3 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

h5 {
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

a {
    color: #63ADF2;
    text-decoration: underline;
}

    a:hover {
        color: inherit;
    }

p {
    margin-bottom: 2rem;
}

/* COMMONS */
html {
    font-size: 62.5%;
    height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#052242+0,061827+60,061827+100 */
    background: rgb(5, 34, 66);
    /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(5, 34, 66, 1) 0%, rgba(6, 24, 39, 1) 60%, rgba(6, 24, 39, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(5, 34, 66, 1) 0%, rgba(6, 24, 39, 1) 60%, rgba(6, 24, 39, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(5, 34, 66, 1) 0%, rgba(6, 24, 39, 1) 60%, rgba(6, 24, 39, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#052242', endColorstr='#061827', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    background-attachment: fixed;
}

.container-fluid {
    height: 100%;
}

    .container-fluid .row {
        height: 100%;
    }

.col-left, .col-right {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.col-left {
    padding: 3rem 4.5rem !important;
}

.col-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url('../images/login-cover.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.material-icons {
    font-size: 2.4rem;
}

    .material-icons.md-18 {
        font-size: 1.8rem;
    }

.logo-text {
		width: 14rem;
		height: 2.4rem;
		margin-bottom: 5rem;
		font-size: 2rem;
}

/* FORMS */
label {
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 1rem;
}

.form-group {
    width: 100%;
    padding-bottom: 2rem;
}

    .form-group:last-child {
        padding-bottom: 3rem;
        margin-bottom: 0;
    }

.help-text {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #63ADF2;
}

.valid-feedback {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #089953;
}

.invalid-feedback {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #D62828;
}

/* FORM */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel] {
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: .1rem solid #3E5C76;
    padding: 1rem;
    padding-left: 0;
    font-size: 1.5rem;
    width: 100%;
    caret-color: #ffffff;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
	-webkit-text-fill-color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 3rem #051c31 inset !important;
	transition: background 5000s ease-in-out 0s !important;
}

input[type=text].is-valid, input[type=email].is-valid, input[type=password].is-valid, input[type=number].is-valid, input[type=tel].is-valid {
    background: url('../images/icon-success.png') no-repeat center right;
    background-size: 1.8rem;
}

input[type=text].is-invalid, input[type=email].is-invalid, input[type=password].is-invalid, input[type=number].is-invalid, input[type=tel].is-invalid {
    background: url('../images/icon-error.png') no-repeat center right;
    background-size: 1.8rem;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=tel]:focus {
    color: #fff;
    background: transparent;
    border-bottom: .1rem solid #3E5C76;
    box-shadow: none;
    outline: 0 none;
    border-color: #80bdff;
    transition: .5s;
}

input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=tel]::placeholder {
    color: #3E5C76;
}

.entry-item {
    width: 100%;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

.textInput, .verifyInput {
    width: 100%;
    margin-bottom: 1rem;
}

.buttons button {
    margin: 0 1rem 1.5rem 0;
}

.intro h2 {
    margin-bottom: 2.5rem;
}

form .error, .error.pageLevel {
    color: red;
}

/* BTN */
.btn, button {
    display: inline-block;
    align-self: flex-start;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    font-weight: 700;
    background-color: #004A97;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
    cursor: pointer;
}

    .btn:hover, button:hover {
        color: #061826;
        background-color: #63ADF2;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        transition-property: color, background-color, border-color, box-shadow;
        transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
        transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
        transition-delay: 0s, 0s, 0s, 0s;
    }

    .btn.btn-secondary {
        align-self: auto;
        font-weight: 700;
        padding: 1rem 3rem;
        text-transform: none;
        background-color: #63ADF2;
        color: #061826;
        margin-right: auto;
    }

.btn-secondary:hover {
    background-color: #004A97;
    color: #fff;
}

.btn-container {
    display: flex;
}

    .btn-container .btn-primary {
        margin-right: 2.5rem;
    }

        .btn-container .btn-primary:last-child {
            margin-right: 0;
        }

/* BREADCRUMBS */
.breadcrumbs {
    width: 100%;
    margin: 0 0 2rem;
}

    .breadcrumbs a {
        color: #63ADF2;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

        .breadcrumbs a .material-icons {
            margin-right: 1rem;
        }

            .breadcrumbs a .material-icons:hover {
                color: #fff;
            }

/* LOGIN */
.login .intro {
	display: none;
}

.login-link, .helpLink {
    color: #63ADF2;
    text-decoration: underline;
    margin-bottom: 1rem;
		width: fit-content;
}

.helpLink {
    display: inline-block;
    margin: 1rem 0;
}

    .helpLink:hover {
        color: #ffffff;
    }

.login-link:first-of-type {
    margin-top: 3.5rem;
}

.colophon-link {
    color: #63ADF2;
}

.cover-title {
	display: block;
	font-size: 3.6rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.colophon {
    margin-top: auto;
    font-size: 1.2rem;
}

.colophon.colophon-italic {
	font-style: italic;
	font-size: 1.4rem;
}

/* LIST */
.list-decimal li {
    list-style: decimal;
}


/* CHANGE PASSWORD */
.change-password #cancel {
	display: none;
}