/*---------------------------------------------------
    Website Theme color *Depricated due to not supported by IE*
-------------------------------------------------- */
:root {
    /**/
    --body-bg-color: #f8f1f4;
    --default-color: #922c54;
    --default-color2: #00416a;
    --default-font-family: "Microsoft JhengHei";
    /**/
    --banner-bg-color: #922c54;
    --banner-color: #ffffff;
    --banner-font-size: 2.5em;
    --banner-line-height: 1em;
    --banner-img-height: 2em;
    /**/
    --precaution-bg-color: #dab8c5;
    --precaution-font-size: 1.2em;
    --precaution-line-height: 1.3em;
    /**/
    --queryTable-th-bg-color: #e6d4ed;
    --queryTable-tr-bg-color1: #faffff;
    --queryTable-tr-bg-color2: #e8f2f2;
    --queryTable-border-color: #cecbd0;
    --queryTable-color: #595757;
}

body {
    background-color: #f8f1f4;
    font-family: "Microsoft JhengHei";
}

/*---------------------------------------------------
    Website Banner
-------------------------------------------------- */
.webBanner {
    overflow: hidden;
    padding: 1% 3%;
    background-color: #922c54;
    background-image: url(../Content/images/banner.png);
    background-repeat: no-repeat;
    background-position: left;
}

    .webBanner a {
        float: left;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        font-size: 2.5em;
        line-height: 1em;
        font-weight: bolder;
    }

    .webBanner img {
        max-height: 2em;
        height: 100%;
        width: auto;
    }

@media only screen and (max-width: 425px) {
    .webBanner img {
        max-height: 1em;
        height: 100%;
        width: auto;
    }
}
/*---------------------------------------------------
    Captcha
-------------------------------------------------- */
.img_captcha {
    min-width: 120px;
    width: 120px !important;
}


/*---------------------------------------------------
    Precaution text
-------------------------------------------------- */
.precautions {
    background-color: #dab8c5;
    font-size: 1.2em;
    color: #00416a;
    font-weight: bold;
    line-height: 1.3em;
    padding: 2% 5% 2% 5%;
    border-radius: 10px;
}

    .precautions .textHighlight {
        color: #c30d23;
        font-weight: bold;
    }
/*---------------------------------------------------
    Precaution Agree
-------------------------------------------------- */
    .agreeLabel {
        text-align: center;
    }

        .agreeLabel a {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #922c54;
            font-size: 2em;
            line-height: 1em;
            font-weight: bold;
            text-decoration: none;
        }

    .agreeLabel img {
        padding-right:1ex;
        height: 1em;
        width: auto;
    }

/*---------------------------------------------------
    Label Style
-------------------------------------------------- */
.labelStyle {
    color: #922c54;
    font-weight: bold;
    font-size: 1.2em;
}

/*---------------------------------------------------
    Query Table
-------------------------------------------------- */
.queryTable {
    border-color: #cecbd0;
    color: #595757;
}
    .queryTable th {
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
        font-size: 1.3em;
        background-color: #e6d4ed;
        color: #922c54;
        border-color: #cecbd0;
    }

    .queryTable thead th {
        border-bottom: 2px solid #cecbd0;
    }

    .queryTable td {
        border-color: #cecbd0;
    }

    .queryTable tr:nth-child(even) {
        background-color: #faffff;
    }

    .queryTable tr:nth-child(odd) {
        background-color: #e8f2f2;
    }


.showClickable {
    color: blue;
    cursor: pointer;
}
    .showClickable:hover {
        text-decoration: underline;
    }

/*---------------------------------------------------
    Custom Checkbox
-------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="checkbox"] {
    display: none;
}

input.check-box {
    display: inline;
}

input[type="checkbox"]:checked + input[type="hidden"] + label {
    background-image: url(/images/elements/Checked.jpg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position-y: center;
    padding-left: 15px;
    min-width: 15px;
    min-height: 15px;
    align-self: center;
}

input[type="checkbox"] + input[type="hidden"] + label {
    background-image: url(./images/elements/Unchecked.jpg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position-y: center;
    padding-left: 15px;
    min-width: 15px;
    min-height: 15px;
    align-self: center;
}

input[type="checkbox"]:checked + label {
    background-image: url(./images/elements/Checked.jpg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position-y: center;
    padding-left: 15px;
    min-width: 15px;
    min-height: 15px;
    margin-top: inherit;
    margin-bottom: auto;
}

input[type="checkbox"] + label {
    background-image: url(./images/elements/Unchecked.jpg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position-y: center;
    padding-left: 15px;
    min-width: 15px;
    min-height: 15px;
    margin-top: inherit;
    margin-bottom: auto;
}

/*---------------------------------------------------
    中文數字清單
-------------------------------------------------- */
.btnStyle {
    position: relative;
    color: #595757;
    background: linear-gradient(#ffffff,#ffffff,#ffffff,#ffffff, #b3b3b3);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    padding: 0.2rem 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    /*transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
}

    .btnStyle::before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border: 10px solid #e5e5e5;
        border-radius: 0.5rem;
    }

.btn_search {
    border-color: #1d7dbf;
}
.btn_clearSearch {
    border-color: #e7000d;
}
.btn_refreshCaptcha {
    border-color: #01913b;
}

/*---------------------------------------------------
    中文數字清單
-------------------------------------------------- */
ol.a, li.a, ol.b, li.b, ol.c, li.c {
    margin: 0;
    padding: 0;
}

ol.a, ol.b, ol.c {
    counter-reset: foo;
    display: table;
}

li.a, li.b, li.c {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

    li.a::before {
        content: counter(foo, cjk-ideographic) "、";
        display: table-cell;
        text-align: right;
        padding-right: .3em;
    }

    li.b::before {
        content: "(" counter(foo, cjk-ideographic) ") ";
        display: table-cell;
        text-align: right;
        padding-right: .3em;
    }

    li.c::before {
        content: counter(foo) ".";
        display: table-cell;
        text-align: right;
        padding-right: .3em;
    }
/*---------------------------------------------------
    Loading Mask
-------------------------------------------------- */
.loading-mask {
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    background-color: #fff;
    color:#000000;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    opacity: 0.6;
    overflow: hidden;
}

    .loading-mask > div {
        top: 50%;
    }