* {
    box-sizing: border-box;
}

html {
    color: #161819;
    font-family: 'Roboto',sans-serif;
    font-size: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: #162F3B;
    background-image: radial-gradient(circle,#495963,#162F3B);
    font-size: 1rem;
    font-weight: 300;
    height: 100%;
    line-height: 1.5;
    overflow: hidden;
    width: 100%;
}

.login-wrap {
    width: 320px;
}

.login-logo {
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,255,255,0.7);
    height: 7rem;
    margin-bottom: 0.25rem;
}

    .login-logo div {
        width: 80%;
    }

.login-form {
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.7);
}

label a,
.footer a {
    font-size: 0.75rem;
}

.footer a {
    margin-left: 0.5rem;
}

.form-group + .form-group {
    margin-top: 1.5rem;
}

.form-control + .form-control {
    margin-top: 0.5rem;
}

.form-control.product {
    margin-bottom: 0.5rem;
}

.form-control {
    font-weight: inherit;
    height: 2rem;
    width: 100%;
}

.form-control-label {
    font-size: 0.75rem;
    padding-bottom: 0.1875rem;
}

input.form-control,
select.form-control,
.checkbox-control label::before {
    background: white;
    border: 1px solid #D2D7D9;
    color: inherit;
}

    input.form-control:required:invalid {
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb%28172%2C188%2C195%29' d='M23.5 16.3l-.1.1-1.9 3.3c-.3.4-.6.5-.9.2-.1 0-.2 0-.2-.1l-5.8-3.3v7s-.2.4-.5.5h-3.9c-.4 0-.6-.2-.6-.7 0-.1.1-.2.1-.2v-6.7l-6 3.5h-.1c-.3.5-.6.2-.9-.2L.8 16.3c-.3-.3-.2-.7.2-.9l.1-.1L6.8 12 .6 8.6v-.1c0-.3-.3-.6-.1-.9l2.1-3.3c0-.3.6-.4 1-.3l6 3.5V.7c0-.5.2-.7.6-.7H14c.5 0 .7.2.7.7v6.9l6-3.4c.3-.3.4-.2.7.1l1.7 3.3v.1c.5.4.3.7-.1.9L17.2 12l5.9 3.4v.1c0 .1.5.4.4.8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0.25em center;
        background-size: 1em 1em;
        padding-left: 1.5em;
    }

        input.form-control:required:invalid:focus {
            background-image: none;
            padding-left: 0.5rem;
        }

.form-control:focus,
.checkbox-control input[type = "checkbox"]:focus + label::before,
a:focus {
    outline: 0;
}

.form-control:focus,
.checkbox-control input[type = "checkbox"]:focus + label::before,
a:focus,
.toggle input:focus + label {
    -webkit-box-shadow: 0 0 0 0.125rem #0084a9;
    ;
    -moz-box-shadow: 0 0 0 0.125rem #0084a9;
    box-shadow: 0 0 0 0.125rem #0084a9;
}

input[type = "checkbox"]:focus {
    outline: 0;
}

a.form-control {
    background: #CFD856;
    color: #000;
    padding: 1.2rem;
    display: block;
    text-align: center;
    line-height: 0px;
}

    a.form-control:hover {
        background: #bdc550;
    }

button.form-control {
    background: #CFD856;
    border: #C1CD23;
    color: inherit;
    font-weight: 500;
}

    button.form-control:hover {
        cursor: pointer;
    }

.form-group.error {
    background: #FFF8cc;
    color: rgba(26, 26, 35, 0.66);
    min-height: 2rem;
}

    .form-group.error ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

a {
    color: #005F7A;
    text-decoration: none;
}

.toggle a {
    display: none;
}

.toggle {
    background: white;
    border: 1px solid #D2D7D9;
    color: inherit;
    height: auto;
    min-height: 2rem;
    position: relative;
}

    .toggle a {
        background-color: #005F7A;
        border: 2px solid white;
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 50%;
        z-index: 1;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

    .toggle input {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }

        .toggle input + label {
            cursor: pointer;
            line-height: 1.25rem;
            padding: 0.375rem 0.5rem;
            position: relative;
            text-align: center;
            z-index: 2;
            -webkit-transition: color 0.3s ease;
            -moz-transition: color 0.3s ease;
            transition: color 0.3s ease;
        }

        .toggle input:last-of-type:checked ~ a {
            left: 50%;
        }

        .toggle input:checked + label {
            color: white;
        }

.checkbox-control input[type = "checkbox"] {
    opacity: 0;
}

    .checkbox-control input[type = "checkbox"]:hover {
        cursor: pointer;
    }

.checkbox-control input[type = "checkbox"],
.checkbox-control label::before {
    height: 1rem;
    width: 1rem;
}

.checkbox-control label::before {
    content: "";
    cursor: pointer;
    margin: 0 0.5rem 0 -1rem;
}

.checkbox-control input[type = "checkbox"]:checked + label::before {
    background: #005F7A;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    border-color: #005F7A;
    color: white;
}

.footer a {
    background: #162F3B;
    color: #ACBCC3;
}

/* padding */
.login-form {
    padding: 1rem 1.5rem;
}

.footer {
    padding: 0 1.5rem;
}

label.product {
    padding: 0 0 0.1875rem 0.5rem;
}

label a,
input.form-control,
select.form-control,
.form-group.error,
.footer a {
    padding: 0.1875rem 0.5rem;
}

/* flexbox */
body,
.login-logo,
.login-form,
label,
.toggle,
.checkbox-control,
.footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.login-form {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.toggle {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    body,
    .login-logo,
    label,
    .toggle input + label,
    .checkbox-control {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    body,
    .login-logo,
    .toggle input + label {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

label {
    -webkit-box-pack: space-between;
    -moz-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.footer {
    -webkit-box-pack: flex-end;
    -moz-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.toggle input + label {
    -webkit-flex: 1 1 0%;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}