/* 縮小失敗。正在傳回未縮小的內容。
(9,23): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(27,35): run-time error CSS1046: Expect comma, found '0'
(27,39): run-time error CSS1046: Expect comma, found '/'
(256,25): run-time error CSS1046: Expect comma, found '255'
(256,33): run-time error CSS1046: Expect comma, found '/'
(259,20): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(262,35): run-time error CSS1046: Expect comma, found '0'
(262,39): run-time error CSS1046: Expect comma, found '/'
(267,27): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(271,27): run-time error CSS1039: Token not allowed after unary operator: '-vh'
(412,24): run-time error CSS1039: Token not allowed after unary operator: '-vh'
 */
body {
    background: url('../../Images/Account/bg_login_1280.png');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.cover-container {
    height: 100vh;
    height: calc(var(--vh,1vh)*100);
    position: relative;
}
.login-content a.home {
    position: absolute;
    color: white;
    top: calc(50% - 640px/2 - 70px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
}
.login-tab-area {
    position: absolute;
    min-width: 520px;
    width: 37vw;
    height: 640px;
    left: calc(50% - 37vw/2);
    top: calc(50% - 640px/2);
    box-shadow: 1px 5px 5px rgb(0 0 0 / 25%);
    border-radius: 0px 0px 2px 2px;
}
.login-tab-area > ul > li {
    height: 80px;
    width: 50%;
}
.login-tab-area > ul > li > a {
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    text-align: center;
    letter-spacing: 4.1px;
    color: #FFFFFF;
    border: unset;
    background-color: rgba(255, 255, 255, 0.4);
    height: 80px;
    border-radius: 2px 2px 0px 0px;
    margin: 0;
    line-height: 60px;
}
.login-tab-area > ul > li.active > a, .login-tab-area > ul > li.active > a:hover, .login-tab-area > ul > li.active > a:focus {
    font-weight: 500;
    color: #539C0A;
    border: unset;
    background-color: rgba(255, 255, 255, 0.95);
}
.login-tab-area > .tab-content {
    min-height: calc(100% - 80px);
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
}
#signin {
    position: relative;
}
.signin-area, .signup-area {
    max-width: 450px;
    margin: 0 auto;
    padding: 40px 0;
}
#Google {
    width: 450px;
    height: 50px;
    border: 1px solid #616161;
    box-sizing: border-box;
    border-radius: 2px;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.1px;
    color: #000000;
    padding: 1rem;
    background: transparent;
}
.validation-summary-errors {
    color: #EB5757;
}
.form-control {
    background: transparent;
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 0.16px;
    width: 450px;
    height: 50px;
    border: 1px solid #616161;
    box-sizing: border-box;
    border-radius: 2px;
    max-width: unset;
    padding: 10px 30px;
    color: #9F9F9F;
}
.has-success .form-control {
    color: #539C0A !important;
    border-color: #539C0A;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.569 1.31891C13.8331 1.06745 14.1846 0.928433 14.5493 0.931193C14.9139 0.933952 15.2633 1.07827 15.5236 1.3337C15.7839 1.58912 15.9347 1.93568 15.9444 2.30023C15.954 2.66479 15.8217 3.01883 15.5752 3.28766L8.09399 12.6439C7.96534 12.7825 7.81008 12.8937 7.63748 12.9708C7.46488 13.048 7.27849 13.0896 7.08946 13.0931C6.90042 13.0966 6.71262 13.062 6.53728 12.9912C6.36194 12.9205 6.20267 12.8151 6.06898 12.6814L1.10773 7.72016C0.969572 7.59142 0.858755 7.43617 0.781895 7.26367C0.705035 7.09117 0.663707 6.90496 0.660375 6.71614C0.657044 6.52732 0.691778 6.33977 0.762505 6.16466C0.833232 5.98956 0.938503 5.8305 1.07204 5.69696C1.20557 5.56343 1.36464 5.45815 1.53974 5.38743C1.71484 5.3167 1.9024 5.28197 2.09121 5.2853C2.28003 5.28863 2.46625 5.32996 2.63874 5.40682C2.81124 5.48368 2.96649 5.5945 3.09523 5.73266L7.02149 9.65703L13.5334 1.36016C13.5451 1.34572 13.5576 1.33195 13.5709 1.31891H13.569Z' fill='%23539C0A'/%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.has-error .form-control {
    color: #EB5757 !important;
    border-color: #EB5757;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1798 8.99977L17.4748 14.2948L14.2948 17.4748L8.99977 12.1798L3.68977 17.4898L0.509766 14.3098L5.81977 8.99977L0.509766 3.68977L3.68977 0.509766L8.99977 5.81977L14.3098 0.524765L17.4898 3.70477L12.1798 8.99977Z' fill='%23EB5757'/%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.has-error .help-block, .text-danger {
    color: #EB5757;
    position: absolute;
    background: #f5faf8;
    padding: 0 4px;
    top: -29%;
    left: 10%;
}
.text-danger {
    top: -20%;
}
select.form-control {
    appearance: none;
    background: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L0.803849 -9.78799e-07L11.1962 -7.02746e-08L6 9Z' fill='%23C4C4C4'/%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
}
.or-area {
    position: relative;
    margin: 20px 0 10px 0;
    text-align: center;
}
.or-area > hr {
    display: inline-block;
    width: 42%;
    border: 1px solid #9C9C9C;
    margin-bottom: 6px;
}
.or-area > p {
    display: inline-block;
    font-weight: 500;
    font-size: 24px;
    color: #9C9C9C;
    margin: 10px 17px 15px 17px;
}
#RememberMe {
    margin: 8px 8px 8px 1px;
}
.remember-me {
    display: inline-block;
}
/* Hide the browser's default checkbox */
.remember-me input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 12px;
    left: 0;
    height: 22px;
    width: 22px;
    border: 2px solid #539C0A;
    border-radius: 3px;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.remember-me input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.remember-me .checkmark:after {
    left: 5px;
    top: 1px;
    width: 8px;
    height: 14px;
    border: solid #539C0A;
    border-radius: 1px;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.remember-me > label {
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 0.16px;
    color: #539C0A;
    padding-left: 25px;
}
.forgot-pw {
    display: inline-block;
    float: right;
    padding-top: 7px;
}
.forgot-pw > a {
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 0.16px;
    color: #FFD93D;
    float: right;
}
.forgot-pw > a:hover {
    text-decoration: none;
}
.login-btn, .signup-btn {
    background: #FCAA2E;
    border-radius: 2px;
    width: 450px;
    height: 50px;
    max-width: unset;
    border: unset;
    font-size: 24px;
    color: #FFFDE8;
    margin-top: 33px;
}
.login-btn:hover, .signup-btn:hover {
    background: #FEC135;
    color: #FFF59E;
}
.login-btn:active, .login-btn:focus, .signup-btn:active, .signup-btn:focus {
    background: #F78122;
    color: #FFFDE8;
}
.signup-btn {
    margin-top: 25px;
}
.signin-person {
    position: absolute;
    bottom: -12rem;
    left: -10rem;
}
.signup-person {
    position: absolute;
    bottom: -1rem;
    right: -11rem;
}

.account-area {
    background: rgb(255 255 255 / 95%);
    position: absolute;
    left: 50vw;
    top: calc(var(--vh) * 50);
    transform: translate(-50%, -50%);
    text-align: center;
    box-shadow: 1px 5px 5px rgb(0 0 0 / 25%);
    border-radius: 2px;
    color: #539C0A;
    font-size: 22px;
    min-width: 866px;
    min-height: calc(var(--vh) * 45);
}
.account-area form {
    display: inline-block;
    margin-top: calc(var(--vh) * 1);
}
.account-area label {
    font-weight: 400;
    margin: 15px 0 20px 0;
    text-align: left;
    display: block;
}
.account-area .login-btn {
    margin: 15px 0 70px 0;
}
.verify-error > ul {
    margin: 0;
    list-style: none;
    padding: 0 5px;
}
@media (max-width: 1155px) {
    .login-tab-area{
        left: calc(50% - 45vw/2);
    }
}
@media (max-width: 900px) {
    .account-area {
        min-width: 94vw;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .web-title {
        display: inline;
    }
}
@media (max-width: 768px) {
    .login-content a.home {
        width: 94vw;
        text-align: center;
    }
    .login-tab-area {
        left: 0;
        min-width: 94%;
        transform: translateX(3%);
    }
    .signin-person, .signup-person {
        display: none;
    }
}
@media (max-width: 576px) {
    .login-tab-area > .tab-content {
        padding: 10px;
    }
    #Google, .form-control, .login-btn, .signup-btn {
        width: 100%;
    }
}
@media (max-width: 568px) {
    .login-tab-area {
        height: auto;
    }
    .login-tab-area > ul > li {
        height: 60px;
    }
    .login-tab-area > ul > li > a {
        height: 60px;
        line-height: 40px;
    }
}
@media (max-width: 467px) {
    .or-area > hr {
        width: 38vw;
    }
    .or-area > p {
        font-size: 6vw;
        margin: 10px 2vw 15px 2vw;
    }
}
@media (max-width: 390px) {
    .remember-me, .forgot-pw {
        width: 100%;
        text-align: center;
    }
    .forgot-pw > a {
        float: unset;
    }
}
@media (max-width: 366px) {
    .or-area > hr {
        width: 37vw;
    }
}
@media (max-width: 340px) {
    .login-content a.home {
        font-size: 5.8vw;
    }

    .login-tab-area > ul > li > a {
        font-size: 8vw;
    }
}
@media (max-width: 297px) {
    .or-area > hr {
        width: 36vw;
    }
}

@media (max-height: 800px) {
    .login-content a.home {
        top: 2vh;
    }
    .login-tab-area {
        top: 12vh;
    }
}
@media (max-height: 760px) {
    .account-area h1 {
        margin-top: 10px;
    }
    .account-area label {
        margin: 5px 0 10px 0;
    }
    .account-area .login-btn {
        margin: 0px 0 10px 0;
    }
}
@media (max-width: 540px) and (max-height: 720px) {
    .login-tab-area {
        height: unset;
    }
    .login-tab-area > .tab-content {
        min-height: unset;
    }
    .signin-area, .signup-area {
        padding: 0;
    }
    .or-area {
        margin: 0;
    }
    .login-btn, .signup-btn {
        margin-top: 0;
    }
}
@media (max-height: 620px) {
    .account-area {
        top: calc(var(--vh) * 55);
    }
}