/* Ignore Spelling: nunito*/

@import "../lib/twitter-bootstrap/css/bootstrap.min.css";
@import "../lib/font-awesome/css/all.min.css";
@import "../Linearicons-Free/icon-font.min.css";
@import "../lib/animate.css/animate.css";

@import "util.css";
@import "main.css";

/*[ Layout ]*/
p, div {
    font-family: nunito;
    color: #919192;
}

html {
    height: 100%;
    box-sizing: border-box;
}

body {
    position: relative;
    margin: 0;
    min-height: 100%;
}

header {
    padding-left: 10%;
    border-bottom: 2px solid;
    border-bottom-color: hsla(0, 0%, 90%, 0.20);
}

footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px 10px 10px 10%;
}

    footer div.site-copyright {
        color: hsl( 0, 0%, 75% );
    }

        footer div.site-copyright span {
            display: inline-block;
        }

body.site-background {
    background-image: url('../images/background2x.png');
    background-size: cover;
    min-height: 100%;
}

.site-logo {
    max-height: 90px;
    width: auto;
}

label.label-site-title {
    font-family: nunito;
    text-align: center;
    min-width: 150px;
    color: white;
    padding: 2px 15px 6px 15px;
    background-color: hsla(0, 0%, 90%, 0.40);
    border-radius: 30px;
}

div.site-window {
    padding: 25px 10% 25px 10%;
    float: right;
}

div.site-content {
    min-width: 320px;
    max-width: 480px;
    min-height: 450px;
    background-color: white;
    border-radius: 25px;
    text-align: left;
    padding: 30px 15px 30px 15px;
}

@media screen and (max-width: 767px) {
    div.site-window {
        float: none;
        padding-left: 0px;
        padding-right: 0px;
    }
}

/*[ Navigation ]*/
div.menu-nav-content {
    width: 100%;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px 0px 10px;
}

a.menu-nav-button {
    font: 24px nunito-bold;
    color: white;
    background: #FF5914;
    width: 100%;
    max-width: 400px;
    height: 62px;
    line-height: 62px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-indent: 10px;
    margin-bottom: 20px;
    display: block;
    text-decoration: none;
    transition: all 0.4s;
}

    a.menu-nav-button:hover {
        background: hsl(0, 0%, 40%);
    }

    a.menu-nav-button:active {
        color: black;
    }

menu-error {
    font-family: nunito-extrabold;
    font-weight: 800;
    font-size: 3em;
    color: red;
}

/*[ Login ]*/
div.wrap-login {
    padding: 10px;
}

div.login-splash {
    width: 100%;
    height: 120px;
    background-image: url('../images/login-icon.svg');
    background-size: initial;
    background-position: center;
    background-repeat: no-repeat;
}

span.login-title {
    font-family: nunito-extrabold;
    font-weight: 800;
    font-size: 3em;
    color: #333333
}

div.login-sub {
    width: 100%;
    font-family: nunito-bold;
}

div.login-required {
    font-family: nunito-bold;
}

span.login-required-dot {
    font-family: nunito-bold;
    color: red;
}

form.form-login {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 20px;
    justify-content: space-between;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

div.form-wrap-input {
    border: 1px solid gray;
    width: 100%;
    position: relative;
    border-radius: 15px;
    padding: 0;
    margin-bottom: 25px;
    text-align: left;
    overflow: visible;
}

    div.form-wrap-input input {
        font-family: revert;
        border: hidden;
        border-radius: 15px;
        outline: none !important;
        min-height: 58px;
    }

        /* There is a bug with bootstrap and tag helper that cuts off descenders without this */
        div.form-wrap-input input * {
            font-family: nunito;
        }

span.form-input-symbol {
    font-size: 24px;
    color: hsl(0, 0%, 40%);
    position: absolute;
    left: 23px;
    top: 14px;
    pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

div.form-input-title {
    top: -13px;
    left: 20px;
    border-left: 7px solid white;
    border-right: 7px solid white;
    background-color: white;
    border-radius: 15px;
    position: absolute;
    z-index: 1;
}

.form-input {
    padding-left: 60px;
    width: 100%;
    height: 55px;
    border: hidden;
}

    .form-input.valid + .form-input-symbol {
        color: forestgreen;
    }

    .form-input:focus + .form-input-symbol {
        color: #FF5914;
    }

span.form-input-validation {
    padding-top: 15px;
    padding-bottom: 15px;
    font: 16px nuinito-bold;
    color: crimson;
}

button.form-input-submit {
    font: 24px nunito-bold;
    line-height: 1.5;
    color: white;
    background-color: #ff5914;
    width: 100%;
    height: 62px;
    border-radius: 15px;
    border: hidden;
    justify-content: center;
    align-items: center;
    text-indent: 10px;
    margin-top: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    transition: all 0.4s;
}

    button.form-input-submit:hover {
        background-color: hsl(0, 0%, 40%)
    }

div.login-forgot-password {
    width: 100%;
    text-align: center;
}

a.link-forgot-password {
    font-family: nunito-bold;
    font-weight: bold;
    color: #ff5914;
}

    a.link-forgot-password:hover {
        color: hsl(0, 0%, 40%);
        text-decoration: none;
    }

/*[ Forgot Password ]*/

.no-background {
    background: none !important;
    border: none !important;
}

div.prompt-forgot-password {
    border-radius: 15px;
    border: none;
    background: white;
    overflow: hidden;
}

button.prompt-forgot-password-close {
    position: absolute;
    overflow: hidden;
    right: -10px;
    top: -10px;
    height: 30px;
    width: 30px;
    padding: 0px;
    border: 1px solid white;
    border-radius: 15px;
    color: white;
    background-color: black;
    font: 30px arial bold;
    line-height: 1px;
}

    button.prompt-forgot-password-close:hover {
        background-color: hsl(0, 0%, 40%);
    }

div.prompt-forgot-password-header {
    font: 24px nunito-bold;
    background-color: #ff5914;
    color: white;
}

div.prompt-forgot-password-body {
    font: 18px nunito;
    color: #333333;
    text-align: left;
}

div.prompt-forgot-password-footer {
    /*Nothing to do*/
}

    div.prompt-forgot-password-footer button {
        font: 18px nunito;
        width: 50%;
        color: white;
        border-radius: 13px;
        background-color: #ff5914;
        border-color: hsl(0, 0%, 40%);
    }

        div.prompt-forgot-password-footer button:hover {
            background-color: hsl(0, 0%, 40%);
        }