body,
html {
    height: 100vh !important;
    /*font-family: 'Segoe UI Semibold', 'Segoe UI','Microsoft JhengHei UI' !important;*/
    font-family: 'Helvetica', 'Hiragino Sans GB','Microsoft JhengHei UI', 'Microsoft Yahei', '微軟雅黑', 'Arial', 'sans-serif' !important;
}

.Bg1 {
    /* background-image: url('~/Images/BG1.jpg');*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.btn-microsoft-login::before {
    position: absolute;
    top: 0px;
    font-size: 1.5rem;
    left: 2rem;
    font-family: "Font Awesome 5 Brands";
    content: '\f17a';
}

input {
    font-size: 16px;
    padding: 20px 0px;
    height: 56px;
    background: #f8f9fa;
    border: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    width: 280px;
    box-sizing: border-box;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    color: #000;
    font-weight: 400;
    -webkit-appearance: none;
}

    input:focus {
        border-bottom: solid 1px #b69de6;
        outline: 0;
        box-shadow: 0 2px 6px -8px rgba(182, 157, 230, 0.45);
    }

.floating-label {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}

    .floating-label label {
        position: absolute;
        top: calc(30% - 7px);
        left: 0;
        opacity: 0;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        padding-left: 44px;
    }

    .floating-label input {
        width: calc(100% - 44px);
        margin-left: auto;
        display: -webkit-box;
        display: flex;
    }

    .floating-label .icon {
        position: absolute;
        top: 0;
        left: 0;
        height: 56px;
        line-height: 56px;
        width: 44px;
        display: -webkit-box;
        display: flex;
    }

        .floating-label .icon svg {
            height: 30px;
            width: 30px;
            margin: auto;
            opacity: .15;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

            .floating-label .icon svg path {
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }

. /*floating-label input:not(:placeholder-shown) {
        padding: 28px 0px 12px 0px;
    }*/
/*.floating-label input:not(:placeholder-shown) + label {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
            opacity: .7;
        }*/
.floating-label input:valid:not(:placeholder-shown) + label + .icon svg {
    opacity: 1;
}

.floating-label input:valid:not(:placeholder-shown) + label + .icon svg path {
    fill: #b69de6;
}

.floating-label input:not(:valid):not(:focus) + label + .icon {
    -webkit-animation-name: shake-shake;
    animation-name: shake-shake;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}