@import url(default1.css);

.linr-qrcode {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

.linr-qrcode img {
    width: 45px;
}

/* 20220419 wei footer 特別調整 */
.main-footer {
    /* display: none; */
    position: relative;
    padding: 15px;
    z-index: 1000;
}

.flex-footer a {
    display: inline;
    color: #00aeef;
}

.flex-footer span {
    color: #ffffff;
}

/* .login-content {
    height: calc(100% - 50px);
} */
/* modal style */
.modal-content {
    padding: 20px 20px;
    border-radius: 15px;
    text-align: left;
}

.modal-content ul {
    list-style-type: none;
    text-decoration: none;
}

button.close {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 100%;
}

.login {
    position: relative;
    z-index: 1000;
}

.login::after {
    content: '';
    display: block;
    left: 0;
    top: 0px;
    transform: translate(0px, 0);
    width: 100%;
    position: absolute;
    height: 170px;
    filter: blur(45px);
    background: rgba(238, 238, 238, .2);
    z-index: -1;
}

.login-user {
    position: relative;
}

.login .cta-title {
    color: #d7d7d7;
    font-size: 21px;
    margin-bottom: 60px;
}

.lable-account,
.lable-password {
    color: #d7d7d7;
    width: 300px;
    text-align: left;
}

.login a {
    color: #aaaaaa
}

/* 自動填寫 */
.login-user>input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

/* 自動填寫 */
.login-user>input:-webkit-autofill,
.login-user>input:-webkit-autofill:hover,
.login-user>input:-webkit-autofill:focus,
.login-user>input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #221d24 inset !important;
}

.login-user>input:focus {
    outline: none;
}

.fade-line {
    border: 0;
    width: 400px;
    height: 2px;
    margin: 0;
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 15%, rgba(230, 230, 230, 0.65) 50%, rgba(255, 0, 0, 0) 85%, rgba(255, 0, 0, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 0)), color-stop(15%, rgba(255, 0, 0, 0)), color-stop(50%, rgba(230, 230, 230, 0.65)), color-stop(85%, rgba(255, 0, 0, 0)), color-stop(100%, rgba(255, 0, 0, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 15%, rgba(230, 230, 230, 0.65) 50%, rgba(255, 0, 0, 0) 85%, rgba(255, 0, 0, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 15%, rgba(230, 230, 230, 0.65) 50%, rgba(255, 0, 0, 0) 85%, rgba(255, 0, 0, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 15%, rgba(230, 230, 230, 0.65) 50%, rgba(255, 0, 0, 0) 85%, rgba(255, 0, 0, 0) 100%);
    /* IE10+ */
    background: linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 15%, rgba(255, 230, 230, 0.65) 50%, rgba(255, 0, 0, 0) 85%, rgba(255, 0, 0, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff0000', endColorstr='#00ff0000', GradientType=1);
    /* IE6-9 */
}

/* 修正某些裝置在這個寬度無法容納登入頁 UI */
@media (max-width: 1280px) {
    .login .cta-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 992px) {
    body {
        background: url('images/cta-tablet.png') 50% 50% no-repeat;
        background-size: 100%;
    }
}

@media (max-width: 600px) {
    body {
        background: url('images/cta-mobile-fix.png') 50% 50% no-repeat;
        background-size: cover;
        /* overflow: scroll !important; */
    }
}

@media (max-width: 582px) {
    /* .login-content {
        height: calc(100% - 70px);
    } */
}

@media (max-width: 480px) {
    body {
        background: url('images/cta-mobile-fix.png') 50% 50% no-repeat;
        background-size: cover;
    }

    .login::after {
        height: 200px;
        background: rgba(238, 238, 238, .2);
        border-radius: 50%;
        transform: translate(0px, 0) scale(3) skew(40deg);
    }

    /* 高度異常處理 */
    .login-content {
        /* min-height: 600px; */
    }

    .login .cta-title {
        margin-bottom: 20px;
    }

    .login-icon,
    .login {
        width: auto;
    }

    .login-register {
        margin: auto;
    }

    .login>div {
        padding-bottom: 20px;
    }

    .federation-logo {
        width: 90px;
        height: 90px;
    }

    .federation-logo img {
        width: 90px;
    }
}

@media (max-width: 375px) {
    .login {
        padding-top: 30px;
        /* height: 420px; */
        font-size: 12px;
    }

    .login-btn {
        margin-bottom: 20px;
    }

    .sign-up {
        padding: 10px;
    }
}