.background-image {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.panel {
    width: 480px;
    margin-top: 15vh;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 255, 255, .8);
}

.input-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.input-wrapper.focus {
        box-shadow: 0 0 5px 1px rgba(4, 159, 217, 1);
    }

.input-wrapper i {
        flex: 0 0 1.5em;
    }

.input-wrapper input {
        flex: 1 0 auto;
    }

.input-wrapper input:focus {
            outline: 0;
        }

.label-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.checkbox-icon {
    width: 16px;
    height: 16px;
    background-image: url(../js/92e88e7187e356193442.svg);
}

.checkbox-wrapper.checked .checkbox-icon {
    background-image: url(../js/cd10021f6442e55675fd.svg);
}

.error-message {
    position: relative;
    left: -4px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.error-message .error-icon {
        flex: 0 0 23px;
        display: block;
        position: relative;
        top: 5px;
    }

.error-message .error-text {
        flex: 1 1 auto;
        padding-top: 3px;
    }

.message-area {
    display: flex;
    flex-wrap: nowrap;
}

.message-area .message-icon {
        flex: 0 0 auto;
    }

.message-area .message-text {
        flex: 1 1 auto;
    }

.spinner {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    animation: spin 1000ms linear infinite;
}

.spinner:after {
        content: ' ';
        display: block;
        position: absolute;
        top: -10px;
        left: 40%;
        width: 8px;
        height: 16px;
        background-color: white;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon--small {
    width: 13px;
}

.icon--checkmark {
    background-image: url(../js/80685ed6c015f261ccc6.svg);
}

.icon--email {
    background-image: url(../js/27234e98d131bb6f87ef.svg);
}

.icon--warning {
    background-image: url(../js/ccea90da39616f98c631.svg);
}

.icon--cancel {
    background-image: url(../js/059ff72143e9c3496253.svg);
}

.icon--cancel-inverted {
    background-image: url(../js/eec6720370157f0e4d2d.svg);
}

.icon--lock {
    background-image: url(../js/bbaabfe1c30dbdafcae8.svg);
}

.icon--key {
    background-image: url(../js/e63726b1d1f442b68605.svg);
}

.icon--user {
    background-image: url(../js/9ca2feefdce39a4a7e6d.svg);
}

.icon--info {
    background-image: url(../js/74b5b7ba0b2f91700137.svg);
}

.password-reqs li::first-letter {
    text-transform: capitalize;
}

.button--nochrome {
    background: none;
    border: 0;
    padding: 0;
}