html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 100%;
    color: #dc3545;
    text-align: right !important;
    float: right;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

#inputPassword .was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc354…%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E); */
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

#inputPassword .was-validated .form-control:valid, .form-control.is-valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8… 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e); */
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.button_example {
    border: none;
    font-family: 'Segoe UI';
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #FFFFFF;
    background-color: #434346;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#434346), to(#2D2D30));
    background-image: -webkit-linear-gradient(top, #434346, #2D2D30);
    background-image: -moz-linear-gradient(top, #434346, #2D2D30);
    background-image: -o-linear-gradient(top, #434346, #2D2D30);
    background-image: linear-gradient(to bottom, #434346, #2D2D30);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#434346, endColorstr=#2D2D30);
}

    .button_example:hover {
        background-color: #FFFFFF;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#252526));
        background-image: -webkit-linear-gradient(top, #FFFFFF, #252526);
        background-image: -moz-linear-gradient(top, #FFFFFF, #252526);
        background-image: -o-linear-gradient(top, #FFFFFF, #252526);
        background-image: linear-gradient(to bottom, #FFFFFF, #252526);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#252526);
    }