/*Login頁*/

#loginpage {
    padding-left: 20%;
    padding-right: 20%;
}

    #loginpage .card {
        border: none;
    }

    #loginpage .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #loginpage .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

.form-group .control-label {
    text-align: left;
    line-height: 160%;
}

#loginpage .text-danger {
    color: red;
    font-size: 12px;
}

#loginpage .highlight-separator {
    margin: 5px 0 15px 0;
    font-weight: 500;
    font-size: 14px;
    color: #497BB3;
    text-align: center;
}

#loginpage .btn-login {
    --bs-btn-bg: #BABD56;
    --bs-btn-color: white;
    --bs-btn-hover-bg: white;
    --bs-btn-hover-color: #BABD56;
    --bs-btn-hover-border-color: #BABD56;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: #BABD56;
    --bs-btn-disabled-color: #BABD56;
    --bs-btn-disabled-bg: transparent;
}

#loginpage .btn-register {
    --bs-btn-color: white;
    --bs-btn-bg: rgba(0, 36, 77, .35);
    --bs-btn-border-color: rgba(0, 36, 77, .1);
    --bs-btn-hover-bg: white;
    --bs-btn-hover-color: rgba(0, 36, 77, .5);
    --bs-btn-hover-border-color: rgba(0, 36, 77, .5);
    --bs-btn-active-bg: rgba(0, 36, 77, .35);
    --bs-btn-active-color: white;
    --bs-btn-active-border-color: rgba(0, 36, 77, .1);
    font-size: 14px;
}

#loginpage .form-check label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

#loginpage .forgetpw a:link, #loginpage .forgetpw a:visited {
    color: #497BB3;
    text-decoration: none;
}

#loginpage .forgetpw a:hover {
    text-decoration: underline;
}

/*外部登入*/
.ua-facebook-button-header {
    position: relative;
    margin: 25px 0 25px 0;
    height: 0;
    text-align: center;
    border: 0px none;
    border-bottom: 1px solid #DDD;
}

.ua-facebook-button-header__text {
    position: relative;
    top: -.65em;
    padding: 0 10px;
    background: #FFF;
    font-style: normal;
    font-size: medium;
}

.social-connect-button:hover {
    border: solid 1px #003580;
    color: #003580;
}


.social-buttons {
    display: flex; /* 讓子元素並排 */
    gap: 10px; /* 按鈕間距（可選） */
}

.social-connect-button {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0 5px;
    padding: 13px 10px 13px 45px;
    line-height: 1.2em;
    border: solid 1px #0896ff;
    border-radius: 5px;
    background: #FFF no-repeat 10px center/25px;
}

.Facebook {
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABQJJREFUeJzt3dFPm1UcxvHnPaUt0OEoAxEWQJawTDenTN0SQYOL3bpoojE6dTdGMyFxF2D4DzbjrSOZiNypGdGMP4CbLbpN0guXkOHF5AK7LGRLhKRkCSWsPa8XQkLesI6t7+np29/zuSIpOf2Rfjmc0rfgwKP34+8Ouo5zGhoJDbQppWLez6EA0fqBC5UGcAUhNTY90T+z+WZn44NkciR6Px4+D2AAUA6oIrmuO65zK0OpyeEssB5AMjkSXY5HpxTQZ3U6Kg1XX83nssnU5HBWAcD9ePg8H3xBHPWGCsW+BQBn/Wf+DLd9eVxHdSvXcU7zwZfJ0fl+BY2E7UHIFueo0kCb7THIEkd3Kj7Pl0xFlO0RyC4GIBwDEI4BCMcAhGMAwjEA4RiAcAxAOAYgHAMQrsr2AJWorWUnXt6/G10du9DeUo9nmuoQq4mgtiaMqlBx33O9p37wacr/MQCftDTV4Z039+FYTxdamupsj7NtDKBI7S31+OLkq+g7vAdOAC+rYQBPKBIOof+jwziZfAEqwBdUMYAnsKetAecGE+horbc9StEYwGM6crANZwffQqwmYnsUXzCAx9BzqAPffHUMoSJP8uWkcr4Sw7qfb8W5wURFPfgAA9iWpxti+HoogUg4ZHsU3zGARwiFFM4OJrBzR7XtUYxgAI/w4fEDONDVbHsMYxhAAY3xGD7/4BXbYxjFAAr49L1u1FaHbY9hFAN4iIb6Wrzdt8/2GMYxgId4P7G/Ik/9XgxgC44DnHh9r+0xSoIBbOGl51rR3LjD9hglwQC20Huow/YIJcMAtnDkRTnvmGcAHvGnavDs7rjtMUqGrwZ67O1sLMn93Lm7jGs30pidu4fbCxksZVawupZDPq9Lcv8bGIBHV8cuo+vPpRcxOpHCn38tGL2f7WIAHu0Gr/K5NDWLCxdTJf8uL4QBeDQ3mHn6d2lqFiM/TRtZuxg8BHo0Nvj/J5Pm0ou4cDHl+7p+YAAeJl73H50or21/MwbgEY34+/v/O3eXy+bAtxUG4BGN+HssunYj7et6fmMAHn6/yWN27p6v6/mNARh2eyFje4SCGIBhS5kV2yMUxAAMW13L2R6hIAZgWLk+/dvAAIRjAMIxAOEYgHAMQDgGIBwDEM7p+WTMtT2En65PDNgewZilzAre/fJnX9fkDhAgt+b/9X1NBhAgf//DAES7Nb/o+5oMIEC4Awi2lFkx8tIyAwgIEwdAgAEEhontH2AAgWHiAAgwgMDgDiCYqQMgwAACwdQBEGAAgWBq+wcYQCCYOgACDCAQuAMIZvIACDCAsmfyAAgwgLJncvsHGEDZM3kABBhA2TO9A1TcNYHF8vuaQr//16/fuAMIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHAMQDgGIBwDEI4BCMcAhGMAwjEA4RiAcAxAOAYgHAMQjgEIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHAMQDgGIJyC1g9sD0G26DXlQqVtj0GWaMwrAFdsz0F2uMq5rBBSY7YHITuUq8fV9ET/jOu647aHodJyNUav/3LmpgIAnVsZgquv2h6KSkMDv4Wro8PA+tPA1ORwNp/LJrkTVD5XYzQSiZ74/cfPVgGgauOG1ORwFsDAa6fGv3d0vh9wjsLRnYCKWJuWfKDXoDHvKueycvX4H7+eubn51v8AYWQlhTwtTVsAAAAASUVORK5CYII=') /*D:\Source\Workspaces\校園網路書房2.0\CampusWork\Web\images\facebook-128.png*/
}

.social-connect-button:link, .social-connect-button:visited {
    font-weight: bold;
    text-decoration: none;
    color: #0896ff;
}

.Google {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAO6UlEQVR42u1deVRTVx5mWmes3Vu76On0HDtzaut0zrQ9ta07VQQXrAKCAoogEgEREFFBFsMOCZCwhqAIooLIJgJGqUJQFkUQKyIqok43W5YAWcgKufMeHSzWhbwk7+Ulub9zvn9z3rvfd3/3t70bExNo0KBBgwYNGjQDtb7k5FeF7CQzYUr8dkFiFENACzsyEBVUwacG1AyG7T4/sG93/SA1oJYfvrdqMCqohB8fzhYwYqjClAQH/v6EmcDE5C9wFfXAANXkORE7xZJPD8vkBe1o4Xk49/WsW6noWfoV6DH7Un2sWAB4znZDPH/P+wORe0/xk2L9xQkJ78MV1zXhyM4UZiSZ82P3Ffb7bPm1e80SpUZEYwEiKp6ztXgw0OeKICEqdIBJfR0yQpAJWUl2A6G7Gno3fCsjjPAJ0LtiPuj3cnnAj6OmCKKj34Ysadn4WcyPBNEh5TwXGwlZSH+WGHg73LsECZGeMH7QdLdnMNb1B3h19i6fD8hO/JPQt2GNZDAmJKubSn0ZsonBBOmJW3jert36SPoTYW0+zI/YW9BLo70C2X2Wq2cxVxsU8X+G3XIFPyaUhWYskO3xxO9PndkfsL2jZ+nXwGDJHwee81ohnxHjBFO5QrvnBfTwbEJTOBJhYM/2ayI6dZpRkj+0P3lOr7tTvzES/9ixEB/hZ1wunx6R0b3KVGn05I9D/17vS8pEvymGTXxu6lQ0rYOEPyU22LJeMJQc+4Vhpnb7UxbynMhfyNE51iwZETCiPAyL/DS6J/pikGAVYTEHIOki2zDIZ0Qze5bNg6SqAT511xn9PvNj9h3TuB1rzAKIDj2rt+QPRAdXQhI1qBFEBtfrr9uPCq2AJGpAfnjgRb3tJPJpYccgiZrs/KB6vSVfkBRDh2e++hiMDLqgv26fxdiqr317SL6mdf3M9C97rJfCPF9d8iMC9Jf8viPJr/K2rBPpy2KjncdeJ2s5b6ujqN/LebDPa/NAv4czn7fFXtzrYDlMtBfTa/JH071gv2uknc/bsEbOC/TtFCRGHxVls9wkJ09+MNH7KDs5k8V5uQsErCQqmofzfNy6u1cvVkK3/6SIPykujnRdNYq9aJBGLRMeOfCNtt5Tefz4FCGb6TMQgojdymwEko+Y8ND+T5DFIEVLt9dyEUA80fWhnEwrvN9befjwSwJmXAoqNLXJj9pbp9+TPEie2r9j6y+kID5iT6M0L/tDXayBID0huM91nRhjkadB78fFBczYeJ27+gCvLlEu63OdbwYudZIgPjpXFW+o9zt/1PUfZr3Ts275sM52vf0quTCd4Uu+dcn698AOyq8GTf5o1B+2q0Fnu36P9x1UgGQ+GgfjI0p7ls19rLxrEOQPZbFno58+EU4+Mk8giI/M1RsvyU7eMTbpbDDkj+7+IN+bxBduFiuFGYnb9W2tRAdTV/FjQ08bzPeBilvUJQLWcmXPUgIFYGMxMpSVbmUCjQQCuPLtbcW5vwJZhSnyBSwR5JuPiLLSLeHKk8CU9yM+V9S8BFABjKL2X6DfZRF+bh8pvQoOptnClSeJDV+zr39I/hi4bwFhlDkOAd9cIMpM3gVXnSy7/ybtFVnt9JHHBPB/SAoskCtTZmuvQZIQWQJXnUQ2css76Wnkj0FejXzVYjtX8zzf3/NneKsGyUx+2bRnIgH8Hhe8DwZ3mal/7q+1GJEcOvRPuOLkCv5mKaqnAJUEgKL6RTCUuQKokyoKU+hxcMXJtvtvUPJVJn8cZBxsqSLP160brjYZBdC8oE8dAfx+JMwC/W6mKn0Hh0zrLIOrTTID9+nTHsn91QH3TSCkLX92fxwpL8PVJmP0f9s3QiPyx6eKxUi9wPwJqaL510CQzVoIV5uEpmi1bdWWAEZTxZovAM/+T21S/20/wJUm6/nf+OmQNgXwe1zwHuAHLv0j8mczvOBKkzH9+zl1Kqb0DwuQ3x3KRuKCjatksOhDUhu+s5eCC/njU8XzLlwyvCuzUrwokSNdaaiIOwteIyz/x4LhWzvtyCCADSyRdEm0CBgqkk5Lg7AHgFes2nHd/RfeGwaAHO7f0AUQUSopxe4BLi/g4eoBrph3keW4M3QB7MkTX8cugPp/KPAUgPy601EoAGKwLVvci60CCLiT0KYOruf/7e2boACIAfp+2FLAHxif4B0AKjs3vw0FQAws6UIltgDwbvhafNO/6cNkSnkNXQAoMrGkgkgNwAtXAdR/IoICIBYHzsm/Ul0Anf77cA0AL8/vhgIgFunnpFYYuoB+NFwF0LzkPhQAsUj7TkZRXQA3fRm4BoHNS+9AARCL1CrpTtUFcMs3CQrAsJBSJQ3BcATsjMM3BjD9L6kEkG4UAghVPQi8vTsEXwHMI1UQ6JgOPcCjAugK9sRVAA3kSgONQQDp30lV/9ROcTdmFa51gNppI1AARAtAovpf0CgfpM/CvRTcZv8uFACBhaBqqQ2GZlDh8wru6/g2g266u5BFAA6pQpmhCyCnTj4HYzv4IzmucUCbYz55BCAyeAGUNimnYhwIWdyL6zHQYnoXCoAYrMLaDRwNBL9f/z2+HcF3h8nyD9r2Bi4ApwyM8wCjHuCW11Hch0JvuNhBAeCP7TkYJ4JGawH3YpxxjQEQtLVuPw0FgD+CCsRtmBcFDHBfV9S8igv5/Oo3QGC1D7Cp9JaQQQAnLkpmlDZJZ+oKwQWiRjwFQCuXqHfljrxprlDb5N85/ymwrXQHswvWjoJxJcfJxMhtW/bQAzwFkIGlCvhIIHjN6bI2ya+qXwsWFjs8JB/FtpqwTmMm364QPI9G6XgKIK9B+rFaDzfcRdVKU0hybgpIPO/1CPFjmFO4DjCv5nxmrAKgV0goeJK/PkWoUPvhlPyzUxW1UzUi/wF3BnA7s/2J5I/Buzb6qrEKYHe+uAVPAfgeEf+s0QPKWyx61CW/pW4JsDix+Znko5hbuB4ktGbPMzbyqeXgxdUM4QieAog+qcZnYY8Mh3TuyVEnxTtc5wq+Om43IfljcDsX8qOxCSDqpDgJ7xSQXS1z1OghlT3FH2JJBwdrpoKAal+ViR+PyCZWoNHsfip4biNLJMaT/DUJAiWXCyZp/LDyVsvfVEvxPgdrK9zVIh/FshOuiqhm9nRjEEBMmYSG9+7feVSknet3Ru6GTzgjeLreDiwoclCb/DFQqkPumgDDvjUkrhC8ZpsklOMtAAZHmqqVBwbd7S/L6z4ceVqKF/+UFE9dBF1kHjJkAQQdk9TiTf6yOBE4wh36u9YeWnbDk/t4ivcBcJ0gxVMHaG0gppntYYjk0yvEm8xi8K//++SKH2j1wZW/Ff1nfE2gqW4pkuK5aJ38MZiWbByJa9lvULeHxp6QzLBNFiqIuRZGpv17lxVtm9vRFC/nghuS4tniRv4YzMu2DMe1ZC4wiKg/B7xAyRLziCB/DVM4ktkCXtT6S8h7ChbtUTPF0yQzoF3JMtP3er93jugeUe3ffUWiRtxexqcm6h6RAkCxuNRpJKo5Y5M+ku/NUU72yRV1EUW+eSwyAMrFOACKxQ7dKF40r8geEC2CeYX2IPhicqo+kR9fInzH46D4NyKHP/yPDuH/5XVgPaOJaAGMwaOG2h5Yx3qD9NF+ucQCmTSSEEm+GXoTCJZ7ANS1Ix2npy87SRnWlQgsy91lkU1pFDISb8o1nbTnPCvfivlASfTol99RyU+EvWhiaw5DVwIYw9bq0I6Qi8xZpCnwXGS6rKn0EqLPtvKkB3A8eIMw8pcitYUDXMlyQl8Ycce/6VoE8487KH1rI2sDLjJn6Ir4vQ0MW6eqXT89qc1NKeEgBAlxF8DeAnE74S+e037iM7MSZ6WuRTAaJB63V3pWU1uDGpiEFI82Vvm/FNCQELP+1I6+iZ7NlZMCLOL6cSN/dYJQmXtBOlMn6mdePZRABgGMh80pL4FfXWxRYD19rjbfdSuX+lZQAyPUrTrkBjLbOILpmSr8gU36fVwEEF8pzdXp2berjt5BNhE8LCSVucnca/a1BzYkHqA2pTpu49KnqdCsf875dMCM4EbGhoD6hPRtNdTLNhVefE2rn98UbwIu+Y1aJR9JMweoAOj2C6u8HyrfcDizc4isIvgzFhY6Ki3LKFKbSh/hOs6OAQfOTp5dpc/gmoptQ+YnXORoMwrX4LX8KEKeQPMbQGlCZXatnBz/t5R9vWie2QmXEX0Rga6xgRMOVjK6Nev3n5KySZUDp32f56mLKqG+YkWZO3DIblfvCvj8IVLdtPbQGFeyk78ssIUEq4jRVLH0FKZUcXOmSHygUfkmacugMc2ZJZBcbHDlJAFzGm9C8q2RVi/m2z500v9uSvsOEosN1qOp4r2nkr+Sjox518ic9aYbFn4p7SwkFuMkVLET2Hys4THyLeJGr3oL1rt+eHQTuwzGBGqkipWHH6aKaI8/5YwsRm8nYuJbD7LRYAcSiw2OHCqwYv6iTDoji9T7mbi0tnx/svQN9AWLizcpU68W7jAxFMtuL1liW+EjheROjNUn3RWZbQVWJoZmJV1V7/hyo+9Bkp+RElYFDuTdKv/YxJCN1nIgy7RoIzwSxgFtNgVfTKrndHImmxiDHewoNd1cFTAAyUcmiMrdh1Pb8naaGJsVIvcSx7bsP7yk2DgDRHTX+9fT2g/drnjPxJgNPfP8L8TdxHKphL7DnuMnyriWTzGB9ocduF5kQ6kJ7TZ0d09vzspEvR9k/CnGbju2Fbk2pteQiLes8BiObc4sKLx79jXIsIqWdaPIzrc2umu+Fi6f0BWcTu8WJV7JZjX+2DgFMqp2jHDm48jL6RXrT/vpRSEJDWr962gdBztKNkH2tGyHOkodghoSL63leMvIRLp5qavSrzb6bsrV3Jizd1ugmyfEM9ysWBbdzC72qgl7YIEQQGitvsQJuJ4N7g9rSq3Oai+icO/ffwEyokPjAu6k/FuVy+Nbc9jBjcxmSs2+PuuKbQpNp3wXFjsiN5v7yD1rwroDGxKa0d8/0lFm3Q7a/wZXXQ+svbv75eKuqvn7bxR5oO4ZScGyEa9RGt6UWhV6KZlLvZRai+7iiEsZnNiWzCKU4LRrR8PR87usizu7U9k5Ga4iNGjQoEGDBs2Q7H/nLN5aJIoywwAAAABJRU5ErkJggg==') /*D:\Source\Workspaces\校園網路書房2.0\CampusWork\Web\images\new-google-favicon-128.png*/;
}


@media (max-width: 575.98px) {
    #loginpage {
        padding-left: 1%;
        padding-right: 1%;
    }

        #loginpage .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #loginpage .card-header {
            font-size: 16px;
        }

        #loginpage .highlight-separator {
            font-size: 13px;
        }

        #loginpage .col-form-label {
            font-size: 14.5px;
        }

        #loginpage .form-select {
            font-size: 14.5px;
        }

        #loginpage .btn-login {
            font-size: 15px;
        }

        #loginpage .btn-register {
            font-size: 13.5px;
        }

    .ua-facebook-button-header__text {
        font-size: 15px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #loginpage {
        padding-left: 2%;
        padding-right: 2%;
    }

        #loginpage .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #loginpage .card-header {
            font-size: 17px;
        }

        #loginpage .col-form-label {
            font-size: 15px;
        }

        #loginpage .form-select {
            font-size: 15px;
        }

        #loginpage .btn-login {
            font-size: 15.5px;
        }

    .ua-facebook-button-header__text {
        font-size: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #loginpage {
        padding-left: 6%;
        padding-right: 6%;
    }

        #loginpage .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #loginpage {
        padding-left: 13%;
        padding-right: 13%;
    }
}


/*Forgot頁*/

#forgot {
    padding-left: 20%;
    padding-right: 20%;
}

    #forgot .card {
        border: none;
    }

    #forgot .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #forgot .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #forgot .text-danger {
        color: red;
        font-size: 12px;
    }

    #forgot .btn-login {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
        letter-spacing: 0.8px;
    }

    #forgot p {
        line-height: 180%;
        font-size: 14px;
        color: #497BB3;
        text-align: center;
    }


@media (max-width: 575.98px) {
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    #forgot {
        padding-left: 1%;
        padding-right: 1%;
    }

        #forgot .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #forgot .card-header {
            font-size: 16px;
        }

        #forgot .col-form-label {
            font-size: 14.5px;
        }

        #forgot .form-select {
            font-size: 14.5px;
        }

        #forgot .btn-login {
            font-size: 15px;
        }

        #forgot p {
            font-size: 13px;
            line-height: 160%;
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #forgot {
        padding-left: 2%;
        padding-right: 2%;
    }

        #forgot .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #forgot .card-header {
            font-size: 17px;
        }

        #forgot .col-form-label {
            font-size: 15px;
        }

        #forgot .form-select {
            font-size: 15px;
        }

        #forgot .btn-login {
            font-size: 15.5px;
        }

        #forgot p {
            font-size: 13.5px;
            line-height: 160%;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #forgot {
        padding-left: 6%;
        padding-right: 6%;
    }

        #forgot .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #forgot {
        padding-left: 13%;
        padding-right: 13%;
    }
}


/*Register頁*/

#regpage {
    padding-left: 20%;
    padding-right: 20%;
}

    #regpage .card {
        border: none;
    }

    #regpage .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #regpage .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #regpage .highlight-separator {
        margin: 5px 0 15px 0;
        font-weight: 500;
        font-size: 14px;
        color: #497BB3;
        text-align: center;
    }

    #regpage .vals {
        color: #FA6C13;
    }

    #regpage .text-danger {
        color: red;
        font-size: 12px;
    }

    #regpage .btn-subscribe {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
        letter-spacing: 0.8px;
    }

    #regpage .warning {
        color: #666464;
    }

        #regpage .warning p {
            line-height: 180%;
            font-size: 15px;
        }

    #regpage .form-check label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

@media (max-width: 575.98px) {
    .ua-facebook-button-header__text {
        font-size: 15px;
    }

    #regpage {
        padding-left: 1%;
        padding-right: 1%;
    }

        #regpage .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #regpage .card-header {
            font-size: 16px;
        }

        #regpage .highlight-separator {
            font-size: 13px;
        }

        #regpage .col-form-label {
            font-size: 14.5px;
        }

        #regpage .form-select {
            font-size: 14.5px;
        }

        #regpage .btn-subscribe {
            font-size: 15px;
        }

        #regpage .form-check label input[type="checkbox"] {
            width: 14.5px;
            height: 14.5px;
            margin-right: 5px;
        }

        #regpage .warning p {
            line-height: 165%;
            font-size: 14px;
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #regpage {
        padding-left: 2%;
        padding-right: 2%;
    }

        #regpage .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #regpage .card-header {
            font-size: 17px;
        }

        #regpage .col-form-label {
            font-size: 15px;
        }

        #regpage .form-select {
            font-size: 15px;
        }

        #regpage .btn-subscribe {
            font-size: 15.5px;
        }

        #regpage .form-check label input[type="checkbox"] {
            width: 14.5px;
            height: 14.5px;
            margin-right: 5px;
        }

        #regpage .warning p {
            line-height: 165%;
            font-size: 13.5px;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #regpage {
        padding-left: 6%;
        padding-right: 6%;
    }

        #regpage .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #regpage {
        padding-left: 13%;
        padding-right: 13%;
    }
}

/*外部註冊*/
#regExternal {
    padding-left: 20%;
    padding-right: 20%;
}

    #regExternal .card {
        border: none;
    }

    #regExternal .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #regExternal .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #regExternal .highlight-separator {
        margin: 5px 0 15px 0;
        font-weight: 500;
        font-size: 14px;
        color: #497BB3;
        text-align: center;
    }

    #regExternal .forgetpw a:link, #regExternal .forgetpw a:visited {
        color: #497BB3;
        text-decoration: none;
    }

    #regExternal .forgetpw a:hover {
        text-decoration: underline;
    }

    #regExternal .btn-login, #regExternal .btn-subscribe {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
    }

    #regExternal .btn-new {
        --bs-btn-color: white;
        --bs-btn-bg: rgba(250,108,19,.65);
        --bs-btn-border-color: rgba(250,108,19,.65);
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: rgba(250,108,19,.8);
        --bs-btn-hover-border-color: rgba(250,108,19,.8);
        --bs-btn-active-bg: rgba(250,108,19,.65);
        --bs-btn-active-color: white;
        --bs-btn-active-border-color: rgba(250,108,19,.65);
    }

    #regExternal .btn-old {
        --bs-btn-bg: rgba(102,100,100,.5);
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: rgba(102,100,100,.5);
        --bs-btn-hover-border-color: rgba(102,100,100,.5);
        --bs-btn-active-color: white;
        --bs-btn-active-bg: rgba(102,100,100,.5);
        --bs-btn-disabled-color: rgba(102,100,100,.5);
        --bs-btn-disabled-bg: transparent;
    }


    #regExternal .panel-default {
        border-color: #88ad1f;
    }

        #regExternal .panel-default > .panel-heading {
            background: #88ad1f;
            color: white;
            border: none;
            letter-spacing: 2px;
            font-size: 16px;
        }

.disabled {
    background-image: none !important;
    background-color: #ebebeb !important;
    cursor: not-allowed;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: gray;
}

::-moz-placeholder { /* Firefox 19+ */
    color: gray;
}

:-ms-input-placeholder { /* IE 10+ */
    color: gray;
}

:-moz-placeholder { /* Firefox 18- */
    color: gray;
}


#regExternal .titled {
    font-size: 15px;
    padding-top: 15px;
    margin-bottom: 20px;
    text-align: center;
}

#regExternal .text-info {
    font-size: small;
    line-height: 180%;
}

#regExternal .text-danger {
    color: red;
    font-size: small;
}

#regExternal .vals {
    color: Red;
}

@media (max-width: 575.98px) {

    #regExternal {
        padding-left: 1%;
        padding-right: 1%;
    }

        #regExternal .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #regExternal .card-header {
            font-size: 16px;
        }

        #regExternal .highlight-separator {
            font-size: 13px;
        }

        #regExternal .col-form-label {
            font-size: 14.5px;
        }

        #regExternal .form-check label input[type="checkbox"] {
            width: 14.5px;
            height: 14.5px;
            margin-right: 5px;
        }

        #regExternal .responsive-btn {
            font-size: calc(1rem * 0.9);
            padding: calc(0.375rem * 0.9) calc(0.75rem * 0.9);
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #regExternal {
        padding-left: 2%;
        padding-right: 2%;
    }

        #regExternal .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #regExternal .card-header {
            font-size: 17px;
        }

        #regExternal .col-form-label {
            font-size: 15px;
        }


        #regExternal .form-check label input[type="checkbox"] {
            width: 14.5px;
            height: 14.5px;
            margin-right: 5px;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #regExternal {
        padding-left: 6%;
        padding-right: 6%;
    }

        #regExternal .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #regExternal {
        padding-left: 13%;
        padding-right: 13%;
    }
}



/*Confirm頁*/

#confrimpg {
    padding-left: 20%;
    padding-right: 20%;
}

    #confrimpg .card {
        border: none;
    }

    #confrimpg .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #confrimpg .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #confrimpg .text-danger {
        font-size: 14px;
    }

    #confrimpg .text-confirm {
        font-size: 14px;
        line-height: 180%;
        color: #497BB3;
    }

    #confrimpg .btn-login {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
        letter-spacing: 0.8px;
    }

@media (max-width: 575.98px) {
    #confrimpg {
        padding-left: 1%;
        padding-right: 1%;
    }

        #confrimpg .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #confrimpg .card-header {
            font-size: 16px;
        }

        #confrimpg .text-danger {
            font-size: 13.5px;
        }

        #confrimpg .text-confirm {
            font-size: 13.5px;
            line-height: 165%;
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #confrimpg {
        padding-left: 2%;
        padding-right: 2%;
    }

        #confrimpg .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #confrimpg .card-header {
            font-size: 17px;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #confrimpg {
        padding-left: 6%;
        padding-right: 6%;
    }

        #confrimpg .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #confrimpg {
        padding-left: 13%;
        padding-right: 13%;
    }
}


/*ResetPassword頁*/

#Resetpwd {
    padding-left: 20%;
    padding-right: 20%;
}

    #Resetpwd .card {
        border: none;
    }

    #Resetpwd .card-header {
        background: rgba(102,100,100,.5);
        color: white;
        border: none;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 220%;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-align: center;
    }

    #Resetpwd .card-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #Resetpwd .text-danger {
        font-size: 14px;
    }

    #Resetpwd .btn-reset {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
        letter-spacing: 0.8px;
    }

@media (max-width: 575.98px) {
    #Resetpwd {
        padding-left: 1%;
        padding-right: 1%;
    }

        #Resetpwd .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #Resetpwd .card-header {
            font-size: 16px;
        }

        #Resetpwd .col-form-label {
            font-size: 14.5px;
        }

        #Resetpwd .form-select {
            font-size: 14.5px;
        }

        #Resetpwd .btn-reset {
            font-size: 15px;
        }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #Resetpwd {
        padding-left: 2%;
        padding-right: 2%;
    }

        #Resetpwd .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #Resetpwd .card-header {
            font-size: 17px;
        }

        #Resetpwd .col-form-label {
            font-size: 15px;
        }

        #Resetpwd .form-select {
            font-size: 15px;
        }

        #Resetpwd .btn-reset {
            font-size: 15.5px;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #Resetpwd {
        padding-left: 6%;
        padding-right: 6%;
    }

        #Resetpwd .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #Resetpwd {
        padding-left: 13%;
        padding-right: 13%;
    }
}


/*ResetPasswordConfirmation頁*/

#Resetconfirm {
    padding-left: 20%;
    padding-right: 20%;
}

#Resetconfirm .card {
    border: none;
}

#Resetconfirm .card-header {
    background: rgba(102,100,100,.5);
    color: white;
    border: none;
    letter-spacing: 2px;
    font-size: 18px;
    line-height: 220%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    text-align: center;
}

#Resetconfirm .card-body {
    padding-left: 2rem;
    padding-right: 2rem;
}

    #Resetconfirm .text-confirm {
        font-size: 14px;
        line-height: 180%;
        color: #497BB3;
    }

    #Resetconfirm .btn-login {
        --bs-btn-bg: #BABD56;
        --bs-btn-color: white;
        --bs-btn-hover-bg: white;
        --bs-btn-hover-color: #BABD56;
        --bs-btn-hover-border-color: #BABD56;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #BABD56;
        --bs-btn-disabled-color: #BABD56;
        --bs-btn-disabled-bg: transparent;
        letter-spacing: 0.8px;
    }

@media (max-width: 575.98px) {
    #Resetconfirm {
        padding-left: 1%;
        padding-right: 1%;
    }

        #Resetconfirm .card-body {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        #Resetconfirm .card-header {
            font-size: 16px;
        }

        #Resetconfirm .text-confirm {
            font-size: 13.5px;
            line-height: 165%;
        }

}

@media (min-width: 576px) and (max-width: 767.98px) {
    #Resetconfirm {
        padding-left: 2%;
        padding-right: 2%;
    }

        #Resetconfirm .card-body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }

        #Resetconfirm .card-header {
            font-size: 17px;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #Resetconfirm {
        padding-left: 6%;
        padding-right: 6%;
    }

        #Resetconfirm .card-body {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #Resetconfirm {
        padding-left: 13%;
        padding-right: 13%;
    }
}