/* General CSS - apply to all media and screeen-size */
html {
    overflow: hidden;
}

#hue-wrapper {
    /*background: rgba(0, 0, 0, .5);*/
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1052;
}

#login-wrapper {
    background: #fff url("../img/Herbal_lbg1.jpg") no-repeat fixed center; /*background: color url repeat attachment position*/
    /*background: #fff url("../img/Road_lbg2.jpg") no-repeat fixed center;*/ /*background: color url repeat attachment position*/
    /*background: #fff url("'../img/Mimic_BG.jpg'") no-repeat fixed center;*/ /*background: color url repeat attachment position*/
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1051;
}

#alert-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

    #alert-wrapper .alert {
        margin: 10px;
        align-self: center;
    }

#login-form {
    position: absolute;
    width: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    #login-form .card {
        flex-direction: row;
        height: 100%;
        padding: 20px;
        border-radius: 0;
        border: none;
        background: rgba(255, 255, 255, .85);
    }

    #login-form .card-header {
        /*border-right: 1px solid dimgray;*/
        flex: 1;
    }

        #login-form .card-header img {
            transform: scale(.75, .75);
        }

    #login-form .card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

        #login-form .card-body > * {
            flex: 1;
        }

        #login-form .card-body .form-title {
            display: flex;
            flex-direction: row;
        }

            #login-form .card-body .form-title .title-icon {
                display: none;
            }

            #login-form .card-body .form-title .title-text {
                display: flex;
                flex-direction: column;
            }

        #login-form .card-body .content-form {
            flex-grow: 2;
        }

    #login-form .username-section,
    #login-form .password-section {
        position: relative;
        height: 50px;
        overflow: hidden;
    }

        #login-form .username-section input,
        #login-form .password-section input {
            width: 100%;
            height: 100%;
            font-size: 1rem;
            /*color: #595f6e;*/
            color: black;
            padding-top: 18px;
            padding-bottom: 7px;
            border: none;
            outline: none;
            background-color: transparent;
        }

        #login-form .username-section label,
        #login-form .password-section label {
            position: absolute;
            height: 100%;
            width: 100%;
            bottom: 0;
            left: 0;
            pointer-events: none;
            border-bottom: 1px solid dimgray;
            font-size: 1rem;
        }

            #login-form .username-section label::after,
            #login-form .password-section label::after {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                left: 0;
                bottom: -2px;
                border-bottom: 2px solid #5fa8d3;
                transform: translateX(-100%);
                transition: transform .3s ease;
            }

        #login-form .username-section .content-name,
        #login-form .password-section .content-name {
            position: absolute;
            bottom: 5px;
            left: 0;
            transition: all .3s ease;
        }

        #login-form .username-section input:focus + .label-name .content-name,
        #login-form .username-section input:valid + .label-name .content-name,
        #login-form .password-section input:focus + .label-name .content-name,
        #login-form .password-section input:valid + .label-name .content-name {
            transform: translateY(-135%);
            font-size: 12px;
            color: #5fa8d3;
        }

        #login-form .username-section input:focus + .label-name::after,
        #login-form .username-section input:valid + .label-name::after,
        #login-form .password-section input:focus + .label-name::after,
        #login-form .password-section input:valid + .label-name::after {
            transform: translateX(0);
        }

.required-field {
    color: red;
}

.error-label {
    content: "";
    font-size: 12px;
    color: red !important;
}

    .error-label .invalid {
        display: inline-block;
    }

.round-button {
    border-radius: 25px;
}

.primary-index {
    z-index: 9999;
}
/* End General Css */

/* 772px CSS - Screen Width <= 772px */
@media screen and (max-width: 772px) {
    #login-form {
        width: 450px;
    }

        #login-form .card {
            flex-direction: column;
            padding: 30px;
        }

        #login-form .card-header {
            display: none;
        }

        #login-form .card-body .form-title .title-icon {
            display: inline;
            height: 100px;
        }

            #login-form .card-body .form-title .title-icon img {
                transform: scale(.75, .75);
                height: 100%;
            }

        #login-form .card-body .form-title .title-text {
            flex: 1;
        }

            #login-form .card-body .form-title .title-text .to-bottom {
                display: flex;
                flex: 1;
                flex-direction: row;
            }

                #login-form .card-body .form-title .title-text .to-bottom .card-category {
                    align-self: flex-end;
                }

                #login-form .card-body .form-title .title-text .to-bottom .card-title {
                    margin: 0;
                    align-self: flex-start;
                }
}
/* End 772px CSS */