html,
body {
    /*height: 100%;*/
    /*background-image: linear-gradient(to right top, rgba(209, 107, 165, 0.5), rgba(199, 119, 185, 0.5), rgba(186, 131, 202, 0.5), rgba(170, 143, 216, 0.5), rgba(154, 154, 225, 0.5), rgba(138, 167, 236, 0.5), rgba(121, 179, 244, 0.5), rgba(105, 191, 248, 0.5), rgba(82, 207, 254, 0.5), rgba(65, 223, 255, 0.5), rgba(70, 238, 250, 0.5), rgba(95, 251, 241, 0.5));*/
    /*background-image: linear-gradient(to right top, rgba(200, 59, 59, 0.6), rgba(210, 0, 84, 0.6), rgba(204, 0, 125, 0.6), rgba(169, 0, 178, 0.6), rgba(37, 18, 235, 0.6));*/
}

body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    /*align-items: center;*/
    padding-top: 40px;
    padding-bottom: 40px;
    /*background-color: #f5f5f5;*/
    /*background: rgb(2,255,192);
    background: radial-gradient(circle, rgba(2,255,192,0.5) 0%, rgba(199,196,255,0.5) 49%, rgba(231,0,255,0.5) 100%);*/
    /*background-image: linear-gradient(to right bottom, #021880, #3b1d9c, #651eb6, #9019cf, #bc00e5);*/
    /*background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);*/
    /*background-image: linear-gradient(to right top, rgba(209, 107, 165, 0.6), rgba(199, 119, 185, 0.6), rgba(186, 131, 202, 0.6), rgba(170, 143, 216, 0.6), rgba(154, 154, 225, 0.6), rgba(138, 167, 236, 0.6), rgba(121, 179, 244, 0.6), rgba(105, 191, 248, 0.6), rgba(82, 207, 254, 0.6), rgba(65, 223, 255, 0.6), rgba(70, 238, 250, 0.6), rgba(95, 251, 241, 0.6));*/
}

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

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group input,
    .form-label-group label {
        height: 3.125rem;
        padding: .75rem;
    }

    .form-label-group label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0; /* Override default `<label>` margin */
        line-height: 1.5;
        color: #495057;
        pointer-events: none;
        cursor: text; /* Match the input under the label */
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

    .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:-moz-placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .form-label-group input:not(:-ms-input-placeholder) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .form-label-group input:not(:-moz-placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .form-label-group input:not(:-ms-input-placeholder) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .form-label-group input:not(:placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .form-label-group input:-webkit-autofill ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .form-label-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        .form-label-group label {
            position: static;
        }

        .form-label-group input::-ms-input-placeholder {
            color: #777;
        }
}


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}