/* 響應式樣式設定開始 */
/*
2017-12-20
@media screen and (min-width: 320px) {
    .FrameTable {
        width: auto;
    }

    .FrameTable_Left {
        width: auto;
    }
}

@media screen and (min-width: 760px) {
    .FrameTable {
        width: 740px;
    }

    .FrameTable_Left {
        width: 460px;
    }
}

@media screen and (max-width: 400px) {
    .FrameTable {
        width: 380px;
    }
}

@media screen and (max-width: 670px) {
    div.Information table.id {
        display: none;
    }
}

*/

/* Default setting / hide mobile image */
img.SchoolName_Mobile {
    display: none !important;
}

div.Information_Mobile {
    display: none;
}

/* PC Version */
@media screen and (min-width: 721px) {
    .FrameTable {
        width: 740px;
    }

    body.junior .FrameTable {
        width: 760px;
    }

    .FrameTable_Left {
        width: 460px;
        height: 320px;
    }

    .FrameTable_Right {
        width: auto;
    }

    img.SchoolName_Mobile {
        display: none !important;
    }

    div.Information_Mobile {
        display: none;
    }

        div.Information_Mobile table.id {
        }
}

/* Mobile Version */
@media screen and (max-width: 780px) {
    .FrameTable {
        width: 100%;
    }

    .FrameTable_Top {
        text-align: center;
    }

    .FrameTable_Left {
        width: auto;
        height: auto;
    }

    .FrameTable_Right {
        width: 100%;
    }

    div.SystemName {
        padding-top: 15px;
    }

    img.SchoolName {
        display: none !important;
    }

    img.SchoolName_Mobile {
        display: inline !important;
    }

    img.AppName {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    img.LoginIcon {
        padding-top: 15px;
        padding-bottom: 5px;
    }

    table.Login {
        margin-left: auto;
        margin-right: auto;
    }

        table.Login td {
            font-size: 18px;
        }

            table.Login td.column1 {
                width: auto !important;
            }

            table.Login td.column2 {
            }

        table.Login input[type=text], table.Login input[type=password] {
            font-size: 15px;
            width: 200px;
        }

        table.Login input.button {
            font-size: 15px;
        }

    div.oops {
        text-align: center;
        font-size: 15px;
    }

    body.night div.oops {
        width: 190px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    div.Information {
        display: none;
    }

        div.Information table.id {
            display: none;
        }

    div.Information_Mobile {
        display: block;
        font-size: 15px;
        width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

        div.Information_Mobile table.id {
            display: none;
        }

        div.Information_Mobile li.tipTesolution {
            display: none;
        }

    div.copyright {
        font-size: 12px;
        margin: 0px 15px;
    }
}

/* Smail Mobile */
@media screen and (max-width: 365px) {
    table.Login input[type=text], table.Login input[type=password] {
        width: 150px;
    }

    div.Information_Mobile {
        font-size: 14px;
        width: 280px;
    }
}

/* Smail Mobile */
@media screen and (max-width: 355px) {
    table.Login input[type=text], table.Login input[type=password] {
        width: 130px;
    }
}

/* Smail Mobile */
@media screen and (max-width: 345px) {
    table.Login input[type=text], table.Login input[type=password] {
        width: 120px;
    }
}

/* 響應式樣式設定結束 */

a:link, a:visited, a:active {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

body {
    background: url(PageBackground_a.gif) top repeat-x;
}

table {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 18px;
}

.hidden {
    display: none;
}

ul.onlineTip {
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px 0px 2px 18px;
    list-style-position: inside;
    list-style-type: disc;
    text-indent: -1.5em;
}

    ul.onlineTip li {
        cursor: default;
        margin-left: 0px;
    }

table.FrameTable {
    border-spacing: 0px;
}

    table.FrameTable th, table.FrameTable td {
        padding: 1px 5px 1px 5px !important;
        vertical-align: top;
    }

/*左表格框*/
.FrameTable_Left {
}

/*上表格框*/
.FrameTable_Top {
}

/*右表格框*/
.FrameTable_Right {
}

/*系統名稱*/
.SystemName {
    padding-left: 30px;
    padding-top: 30px;
    word-spacing: 0px;
    letter-spacing: 0px;
    font-size: 10pt;
    vertical-align: top;
    font-family: Arial;
}

    .SystemName img {
        vertical-align: text-top;
    }

    .SystemName > .VersionText {
        font-size: 10px;
        font-family: Arial;
    }

        .SystemName > .VersionText > .EngSystemNameAndVersionNumber {
            text-shadow: 3px 3px 4px black;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

.card_ctl {
    padding-left: 30px;
    padding-top: 30px;
    font-size: 12pt;
    font-family: 微軟正黑體,新細明體;
}

    .card_ctl .ctl_error_message {
        color: #ff8080;
        font-weight: bold;
    }

/*左方說明文字*/
.Information {
    padding-left: 35px;
    padding-top: 30px;
    font-family: 新細明體;
    font-size: 10.5pt;
    line-height: 24px;
}

/*登錄表單文字*/
.Login {
    font-size: 10pt;
}

/*輸入表單樣式*/
input.keyin {
    width: 110px;
}

input.keyin, .showPassString {
    font-size: 15px !important;
}

.showPassString {
    color: white !important;
    padding: 0px .375rem !important;
}

/*登入按鈕樣式*/
input.button {
    font-size: 9px;
    font-family: Verdana;
    font-weight: bold;
    border: 1px solid #000000;
    background-color: #000000;
    color: #FFFFFF;
    cursor: pointer;
}

/*註解字*/
.oops {
    padding-top: 20px;
    font-size: 12px;
    font-family: Verdana;
    color: #FFFF00;
}

/*底下版權標語*/
.copyright {
    font-size: 8pt;
    font-family: Arial;
    color: #FFFFFF;
    text-align: center;
}

div.copyright span {
    display: inline-block;
    margin-right: 5px;
}

div.LoginContainer {
    position: relative;
}

    div.LoginContainer span.RescureAccount {
        position: absolute;
        top: 0px;
        right: 0px;
        padding-top: 30px;
        padding-right: 10px;
        font-size: 16px;
    }

        div.LoginContainer span.RescureAccount:before {
            content: '忘記密碼？';
            color: cyan;
            cursor: pointer;
        }

        div.LoginContainer span.RescureAccount:hover, div.LoginContainer span.RescureAccount:hover:before {
            color: yellow !important;
            text-decoration: underline;
        }

a.VCode_Refresh, a.VCode_Refresh:link, a.VCode_Refresh:active, a.VCode_Refresh:visited {
    color: cyan;
}

    a.VCode_Refresh:hover {
        color: yellow !important;
        text-decoration: underline;
    }

.version {
    font-size: 8pt;
    font-family: Arial;
    padding-left: 1em;
}

div.get_browser {
    font-family: 微軟正黑體, 新細明體;
    font-size: 16px;
}

div.get_browser_tip {
    padding-bottom: 10px;
}

div.get_browser_button {
    display: inline-block;
    color: royalblue;
    background-color: #7DE9FF;
    padding: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 4px #3B79A7;
}

    div.get_browser_button a, div.get_browser_button a:link, div.get_browser_button a:visited, div.get_browser_button a:active {
        color: royalblue;
        text-decoration: none;
    }

/* css3 begin */
input[type=button].aspDisabled, a.aspDisabled {
    color: #808080 !important;
}

    a.aspDisabled:hover {
        cursor: not-allowed;
        text-decoration: none;
    }

input[type=button].button.aspDisabled {
    border-color: #3F6D8D;
}

input[type=button].button:disabled, input[type=submit].button:disabled {
    border-color: #3F3F3F;
    color: #A0A0A0;
    background-color: #606060;
}

table.nopadding1 th, table.nopadding1 td {
    padding: 0px;
}

table.nospacing1 {
    border-spacing: 0px;
}

/* 2013.07.25 begin */

table.padding0 th, table.padding0 td {
    padding: 0px;
}

table.padding1 th, table.padding1 td {
    padding: 1px;
}

table.padding2 th, table.padding2 td {
    padding: 2px;
}

table.padding3 th, table.padding3 td {
    padding: 3px;
}

table.padding4 th, table.padding4 td {
    padding: 4px;
}

table.padding5 th, table.padding5 td {
    padding: 5px;
}

table.spacing0 {
    border-spacing: 0px;
}

table.spacing1 {
    border-spacing: 1px;
}

table.spacing2 {
    border-spacing: 2px;
}

table.margin0 th, table.margin0 td {
    margin: 0px;
}

/* 2013.07.25 end */

td.nowrap {
    white-space: nowrap;
}

/* align=center */
div.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    div.center div, div.center span, div.center table, div.center img {
        margin-left: auto;
        margin-right: auto;
    }

table.center {
    margin-left: auto;
    margin-right: auto;
}

tr.center {
    text-align: center;
}

    tr.center div, tr.center span, tr.center table, tr.center img {
        margin-left: auto;
        margin-right: auto;
    }

td.center {
    text-align: center;
}

    td.center div, td.center span, td.center table, td.center img {
        margin-left: auto;
        margin-right: auto;
    }

/* align=left */
div.left {
    text-align: left;
}

    div.left div, div.left span, div.left table, div.left img {
        margin-right: auto;
    }

table.left {
    text-align: left;
}

tr.left {
    text-align: left;
}

    tr.left div, tr.left span, tr.left table, tr.left img {
        margin-right: auto;
    }

td.left {
    text-align: left;
}

    td.left div, td.left span, td.left table, td.left img {
        margin-left: 0px;
        margin-right: auto;
    }

/* align=right */
div.right {
    text-align: right;
}

    div.right div, div.right span, div.right table, div.right img {
        margin-left: auto;
    }

table.right {
    text-align: right;
}

tr.right {
    text-align: right;
}

    tr.right div, tr.right span, tr.right table, tr.right img {
        margin-left: auto;
    }

td.right {
    text-align: right;
}

    td.right div, td.right span, td.right table, td.right img {
        margin-left: auto;
        margin-right: 0px;
    }

/* valign=top */
tr.top th, tr.top td, th.top, td.top, img.top {
    vertical-align: top;
}

/* valign=middle */
tr.middle th, tr.middle td, th.middle, td.middle, img.middle {
    vertical-align: middle;
}

/* valign=bottom */
tr.bottom th, tr.bottom td, th.bottom, td.bottom, img.bottom {
    vertical-align: bottom;
}

/* border: solid 1px black */
table.border1 {
    border: solid 1px black;
}

    table.border1 th, table.border1 td {
        border: solid 1px black;
    }

/* nowrap */
.nowrap {
    white-space: nowrap;
}

/* css3 end */

/* display begin */

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

/* display end */

/* button begin */

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

button {
    -webkit-appearance: button;
}

/* button end */