body {
    width:  100%;
    min-height: 100vh;
    background-image: url( "/assets/img/background.jpg" );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*  
--------------------------------------------------------------
    Logo box
--------------------------------------------------------------
*/
div.logo-box {
    position: absolute;
    top: calc( 36vh - 200px );
    left: calc( 50vw - 225px );
    width: 450px;
    min-height: 200px;
    max-height: 200px;
    text-align: center;
}

div.logo-box img.company {
    max-width:  200px;
    height: 200px;
    margin-right: 30px;
    max-height: 100px;
}

div.logo-box img.product {
    height: 100px;
    width:  150px;
    vertical-align: bottom;
}

/*  
--------------------------------------------------------------
    Login box
--------------------------------------------------------------
*/
div.login-box {
    margin: 36vh auto 10px;
    padding:    20px 55px 20px;
    background-color:   white;
    width:  340px;
}

h1 {
    text-transform:     uppercase;
    color:  #43a2d1;
    font-weight:    550;
}

div.form-group {
    position:   relative;
    margin-bottom: 10px;
    width:  100%;
}

div.form-group.form-check {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    /* padding-right: 15px; */
}

input[type="text"], input[type="password"] {
    padding: 2px 0px 2px 5px;
    height: 30px;
    display: block;
    width: 100%;
    font-family:    "Segoe UI";
}

input[type="checkbox"] {
    height: 13px;
    width: 13px;
    margin-top: auto;
}

input::placeholder {
    font-size:  0.9rem;
    font-style: italic;
    text-transform: lowercase;
}

input::--webkit-input-placeholder {
    font-size:  0.8rem;
    font-style: italic;
    text-transform: lowercase;
}

label {
    background-color: white;
}

label[for=username], label[for=password] {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 5px;
    right: -5px;
    background-color: white;
    /* background-image: url( "/assets/img/svg/avatar.svg" );   */
}

label[for=username]::before {
    font-family:    "FontAweSome Regular";
    content:        "\f007";
    color:          #43a2d1;
/*  font-family:    "FontAweSome Solid";
    content:        "\f502";
*/
    font-weight:    400;
    font-size:      20px;
}

label[for=password]::before {
    font-family:    "FontAweSome Solid";
    content:        "\f13e";
    font-weight:    400;
    font-size:      20px;
    color:          #43a2d1;
}

label[for="keep-me-logged-in"] {
    display:    inline-block;
    font-size:  13px;
    font-family:    "Segoe UI";
    color:      #888;
    font-weight:    300;
}

.forgotten-link {
    margin-left:        auto;
    font-family:        'Segoe UI';
    font-size:          13px;
    text-decoration:    none;
    color:              #888;
    -webkit-transition: color .2s ease-out;
    transition:         color .2s ease-out;
}

/*  
--------------------------------------------------------------
    Footer box
--------------------------------------------------------------
*/
div.footer-box {
    position: absolute;
    top: calc( 36vh + 306px );
    left: calc( 50vw - 226px );
    width: 451px;
    min-height: 50px;
    max-height: 50px;
    text-align: center;
    font-size: 12px;
    color:      #fff;
    line-height:    14px;
    padding-top:    15px;
}