@charset "utf-8";
/*CSS Info ======================================================================
File Name: Grid.css
Create Editor: Sophia,Eliam
Create Date: 2012/06/19
Last Editor: JieC
Last Date: 2019/11/04
Version： 1.5.3
---------------------------
【 風格 】
    菊暖蘭系
    jq：jquery-ui-1.10.4.custom(LyallCMS)
    font-awesome：font-awesome 5.8.1  http://fortawesome.github.io/Font-Awesome/

【 Table of Contents 】
    MyGridView  自訂寬度
    MyGridView2 100%寬度
        MyHead
        MyRow
        MyAlt
        MyPager
        MyOver
        MyTable
        Alt
        Over
    MyQueryArea 查詢區域(預設寬度100%) 
    CommandArea 
    修正Font Awesome
=================================================================================*/

/*===============================================================================
                           Grid View 或列表表格設定 
=================================================================================*/
.MyGridView, .MyGridView2 {
    background-color: #fff;
    margin-bottom: 30px;
}

.MyGridView,
.MyGridView2 {
    width: 100%;
}

    .MyHead, .MyGridView tr.MyHead th, .MyGridView th, .MyGridView2 th {
        color: #fff;
        font-weight: bold;
        font-family: "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
        font-size: 1.125rem;
        font-weight: bold;
        padding: 10px 5px;
        border-right: 1px solid #fff;
        border-bottom: 2px solid #fff;
        background-color: #5A5A5A;
    }

    .MyGridView th {
        vertical-align: middle;
    }

        .MyHead a, .MyGridView th a {
            color: #e96b00;
        }

            .MyHead a:hover, .MyGridView th a:hover {
                color: #a45919;
            }

    .MyGridView tr.MyHead th, .MyGridView2 tr.MyHead th {
        text-align: center;
    }

    .MyGridView tr.MyHead td {
    }

    .MyGridView th i {
        padding-left: 10px;
    }

    .MyRow, .MyGridView td, .MyGridView2 td {
        color: #888;
    }

        .MyGridView td, .MyGridView2 td, .MyRow td, .MyAlt td {
            padding: 10px;
            vertical-align: middle;
            border-bottom: 1px solid #DDD;
            word-break: break-all;
        }

.borderTable td {
    border: 1px solid #ddd;
}

.MyRow a, .MyGridView td a, .MyGridView2 td a {
    color: #F57004;
}

    .MyRow a:hover, .MyGridView td a:hover, .MyGridView2 td a:hover {
        color: #ADD60F;
    }

.MyGridView .even { /*偶數行*/
    background-color: #F5F5F5;
}

.MyAlt {
    padding: 2px;
    background-color: #F5F5F5;
}

    .MyAlt a {
        color: #8aae00;
    }

        .MyAlt a:hover {
            color: #769304;
        }

.MyPager {
    font-size: .875rem;
    padding: 2px;
    color: #777;
    overflow: hidden;
    margin-bottom: 10px;
}

    .MyPager .pager-total {
        float: left;
    }

    .MyPager .pager-info {
        float: right;
        padding: 2px 0;
    }

    .MyPager .Alert {
        color: #d36201;
    }

    .MyPager select {
        min-width: unset;
    }


.MyOver, .MyHighlight {
    background-color: #f2ece0;
}
/*===============================================================================
                           Table 套用 
=================================================================================*/
.Mytable {
    width: 100%;
    margin-bottom: 30px;
}

    .Mytable caption, .MyCaption { /*表格標題*/
        color: #544E4D;
        font-size: 1.375rem;
        letter-spacing: 0.1em;
        padding: 0 10px;
        margin: 0 0 0 0;
        caption-side: top;
        text-align: left;
        font-weight: bold;
        line-height: 2em;
        font-family: "Arial", "\5FAE\8EDF\6B63\9ED1\9AD4";
    }

    .Mytable th {
        font-weight: bold;
        color: #333;
        text-align: center;
        padding: 15px;
        width: 18%;
        background-color: #ECD5A4;
        vertical-align: middle;
        font-size: 1.125rem;
        border: 1px solid #fff;
        border-bottom: 3px solid #fff;
    }

        .Mytable th.secThead {
            background-color: #7D6B45;
            color: #F9F2E3;
            border: 1px solid #D7CCB7;
        }

    .Mytable.NoWrap thead th, .NoWrap tbody .NoWrapCont {
        white-space: nowrap;
        width: unset;
    }

    .Mytable thead th {
        color: #fff;
        background-color: #784a1a;
    }

    .Mytable tbody th {
        background-color: #f8e8c5;
    }

    .Mytable .odd { /*奇數行*/
        /*background-color: #fbf9f8;*/
    }

    .Mytable .even { /*偶數行*/
        /*background-color: #ffffff;*/
    }

    .Mytable td {
        color: #333;
        padding: 15px;
        text-align: left;
        border: 1px solid #D7CCB7;
        vertical-align: middle;
        background-color: #fff;
        font-size: 1rem;
    }

        .Mytable td i {
            margin: 0 5px;
        }

        .Mytable td p {
            margin-bottom: 0;
        }

    .Mytable a:focus i {
        outline: 5px dotted #f09819;
        font-size: 1.125rem;
        color: #FF800E;
    }


@media only screen and (max-width: 29.9375em) {
    .Mytable.NoWrap thead th,
    .NoWrap tbody .NoWrapCont {
        white-space: normal;
        width: 18%;
    }
}


/*===============================================================================
                           查詢區域 套用 
=================================================================================*/
.MyQueryArea {
    padding: 20px;
}

    .MyQueryArea fieldset {
        margin-bottom: 15px;
    }

        .MyQueryArea fieldset .Legend {
            font-size: 1rem;
            vertical-align: middle;
            margin: 0;
            margin-right: 10px;
            cursor: default;
            width: 5rem;
            display: inline-block;
        }

        .MyQueryArea fieldset select {
            min-width: 175px;
            appearance: none;
            -ms-appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            padding: 0 40px 0 10px;
            border-color: #2C7F9B;
            background-image: url(../../images/icon-select.png);
            background-repeat: no-repeat;
            -ms-background-position: calc(100% - 10px) center;
            background-position: calc(100% - 10px) center;
        }

        .MyQueryArea fieldset input[type="text"],
        .MyQueryArea fieldset textarea {
            min-width: 215px;
            padding: 0 5px;
            border: 1px solid #2C7F9B;
        }

        .MyQueryArea fieldset input[type="date"],
        .MyQueryArea fieldset input[type="month"] {
            min-width: 215px;
            border: 1px solid #2C7F9B;
        }

            .MyQueryArea fieldset select:focus-visible,
            .MyQueryArea fieldset input[type="text"]:focus-visible,
            .MyQueryArea fieldset input[type="date"]:focus-visible,
            .MyQueryArea fieldset input[type="month"]:focus-visible {
                outline: 5px dotted #f09819;
            }


    .MyQueryArea .CommandArea {
        text-align: right;
    }

        .MyQueryArea .CommandArea .btn {
            margin-bottom: 0;
        }

@media only screen and (max-width: 47.9735em) {
    .MyQueryArea {
        padding: 20px 0;
    }

        .MyQueryArea fieldset .Legend {
            margin-right: 0;
            margin-bottom: 5px;
            display: block;
        }

        .MyQueryArea fieldset select {
            min-width: calc(100% - 50px);
        }

        .MyQueryArea fieldset input[type="text"] {
            min-width: calc(100% - 10px);
        }

        .MyQueryArea fieldset input[type="date"],
        .MyQueryArea fieldset input[type="month"] {
            min-width: calc(46.9% - 10px);
        }

        .MyQueryArea .CommandArea {
            text-align: center;
        }

            .MyQueryArea .CommandArea .btn {
                margin-top: 20px;
                min-width: 100%;
            }
}

@media only screen and (max-width: 29.9375em) {
    .MyQueryArea fieldset {
        margin-bottom: 20px;
    }

        .MyQueryArea fieldset input[type="date"],
        .MyQueryArea fieldset input[type="month"] {
            min-width: calc(45.9% - 10px);
        }
}
/*-------------------------- radio button / checkbox --------------------------*/
.radioWrap,
.checkboxWrap {
    position: relative;
    cursor: pointer;
    padding-left: 1.5rem;
    text-align: left;
    color: #333;
    display: inline-block;
    margin-bottom: 0.5rem;
}

    .radioWrap input,
    .checkboxWrap input {
        width: auto;
        opacity: 0.0001;
        position: absolute;
        left: 0.25rem;
        top: 0.25rem;
        margin: 0;
        padding: 0;
    }

    .radioWrap .radioBtn {
        position: absolute;
        left: 0;
        cursor: pointer;
        display: block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #aaa;
    }

        .radioWrap .radioBtn::before,
        .radioWrap .radioBtn::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            margin: 0.25rem;
            width: 1rem;
            height: 1rem;
            -webkit-transition: color 0.28s ease, -webkit-transform 0.28s ease;
            transition: color 0.28s ease, -webkit-transform 0.28s ease;
            transition: transform 0.28s ease, color 0.28s ease;
            transition: transform 0.28s ease, color 0.28s ease, -webkit-transform 0.28s ease;
            border-radius: 50%;
            border: 0.125rem solid currentColor;
            will-change: transform, color;
            box-sizing: border-box;
        }

        .radioWrap .radioBtn::after {
            -webkit-transform: scale(0);
            transform: scale(0);
            background-color: #2C7F9B;
            border-color: #2C7F9B;
        }

.radioField:checked ~ .radioBtn::after {
    transform: scale(.5);
}

.radioField:checked ~ .radioBtn::before {
    color: #2C7F9B;
}

.radioWrap:hover i,
.checkboxWrap:hover i {
    color: #2C7F9B;
}

.checkboxWrap .checkboxBtn {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    color: #999;
    left: 0;
    top: 0.25rem;
    width: 14px;
    height: 14px;
    z-index: 0;
    border: 1px solid currentColor;
    border-radius: 0.0625rem;
    transition: color 0.28s ease;
    will-change: color;
}

    .checkboxWrap .checkboxBtn::before,
    .checkboxWrap .checkboxBtn::after {
        position: absolute;
        height: 0;
        width: 0.2rem;
        background-color: #2C7F9B;
        display: block;
        transform-origin: left top;
        border-radius: 0.25rem;
        content: "";
        transition: opacity 0.1s ease, height 0s linear 0.1s;
        opacity: 0;
        will-change: opacity, height;
    }

    .checkboxWrap .checkboxBtn::before {
        top: 0.65rem;
        left: 0.38rem;
        transform: rotate(-135deg);
        box-shadow: 0 0 0 0.0625rem #fff;
    }

    .checkboxWrap .checkboxBtn::after {
        top: 0.3rem;
        left: 0;
        transform: rotate(-45deg);
    }

.checkboxField:checked ~ .checkboxBtn {
    color: #2C7F9B;
}

    .checkboxField:checked ~ .checkboxBtn::after,
    .checkboxField:checked ~ .checkboxBtn::before {
        opacity: 1;
        transition: height 0.1s ease;
    }

    .checkboxField:checked ~ .checkboxBtn::after {
        height: 0.5rem;
    }

    .checkboxField:checked ~ .checkboxBtn::before {
        height: 1.2rem;
        transition-delay: 0.1s;
    }

.radioWrap span,
.checkboxWrap span {
    font-size: 1rem;
}

/*-------------------------- 深色背景查詢區域 --------------------------*/
.deepBg .MyQueryArea fieldset .Legend,
.deepBg .MyQueryArea fieldset span {
    color: #fff;
}

.deepBg .required::after {
    color: #F9BF3B;
}

.deepBg label {
    color: #fff;
}
/*===============================================================================
                           頁籤 套用 
=================================================================================*/
.Mytabs {
    margin: 0 20px 30px 0;
}

    .Mytabs .tabsBtn {
        display: table;
        position: relative;
        overflow: hidden;
    }

        .Mytabs .tabsBtn li {
            float: left;
        }

            .Mytabs .tabsBtn li a {
                background-color: #eaeaea;
                color: #777;
                display: block;
                padding: 15px 25px;
                transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                margin-right: 10px;
                font-weight: bold;
                font-size: 1.125rem;
                border-radius: 5px 5px 0 0;
                letter-spacing: .125rem;
            }

                .Mytabs .tabsBtn li a:hover {
                    background-color: #4AA7E4;
                    color: #fff;
                }

            .Mytabs .tabsBtn li.current a {
                color: #fff;
                background-color: #0074BF;
            }

    .Mytabs .tabsItem {
        display: none;
        padding: 20px;
        background-color: #f7f8f9;
        border-top: 3px solid #0074BF;
    }

        .Mytabs .tabsItem:first-child {
            display: block;
        }

/*===============================================================================
                           按鈕 套用 
=================================================================================*/
/*-------------------------- 按鈕列 --------------------------*/
.CommandArea {
    margin-bottom: 10px;
}

    .CommandArea .btn i {
        padding-right: 10px;
    }

.btn,
.Lbtn {
    -webkit-appearance: none;
    font-weight: bold;
    font-size: 1.25rem;
    border-radius: 5px;
    background-color: #DC143C;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

    .btn:hover,
    .Lbtn:hover {
        text-decoration: none;
    }

.Lbtn {
    display: inline-block;
    padding: 18px 20px;
}

    .Lbtn i {
        padding-right: 5px;
    }

    .Lbtn + .Lbtn,
    .btn + .btn {
        margin-left: 10px;
    }

.btn {
    height: 3.625rem;
    border: none;
    min-width: 190px;
}

    .btn:hover {
        background-color: #B82A35;
    }

    .btn:focus,
    .Lbtn:focus {
        outline: 5px dotted #f09819;
        -webkit-transition: outline 0.15s linear;
        -moz-transition: outline 0.15s linear;
        -o-transition: outline 0.15s linear;
        transition: outline 0.15s linear;
        text-decoration: none;
    }

.btn-revision {
    border: 2px solid #348550;
    background-color: #fff;
    -webkit-appearance: none;
    font-weight: bold;
    font-size: 1.25rem;
    border-radius: 25px;
    color: #348550;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
    width: 260px;
    padding: 6px 0;
    transition-duration: .4s;
}

    .btn-revision:hover,
    .btn-revision:focus-visible {
        background-color: #348550;
        color: #fff;
        text-decoration: none;
        transition: all .3s;
    }

    .btn-revision:focus-visible {
        outline: 5px dotted #f09819;
    }
/*-------------------------- 按鈕顏色 --------------------------*/
/*紫色*/
.Lbtn-secondary {
    background-color: #805096;
}

    .Lbtn-secondary:hover {
        background-color: #703D87;
    }

    .Lbtn-secondary.btn-effect:hover {
        box-shadow: 3px 3px 10px rgba(112, 61, 135, .5);
        color: #703D87;
    }

    .Lbtn-secondary.btn-effect::after {
        background-color: #9365A8;
    }

/*藍色*/
.Lbtn-thertiary {
    background-color: #0d72a6;
}

    .Lbtn-thertiary:hover {
        background-color: #045da0;
    }

    .Lbtn-thertiary.btn-effect:hover {
        box-shadow: 0px 2px 10px 5px rgba(11, 139, 206, .5);
        color: #0b7bce;
    }

    .Lbtn-thertiary.btn-effect::after {
        background-color: #0B8BCE;
    }

/*綠色*/
.Lbtn-fourthly {
    background-color: #40825B;
}

    .Lbtn-fourthly:hover {
        background-color: #2B6A44;
    }

    .Lbtn-fourthly.btn-effect:hover {
        box-shadow: 0px 2px 10px 5px rgba(43, 106, 68, .5);
        color: #2B6A44;
    }

    .Lbtn-fourthly.btn-effect::after {
        background-color: #40825B;
    }

/*-------------------------- 按鈕效果 --------------------------*/
.btn-effect {
    position: relative;
    transition-duration: .4s;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(12, 9, 51, .3);
}

    .btn-effect:hover {
        background-color: #fff;
        box-shadow: 0px 2px 10px 5px rgba(184, 42, 53, .5);
        color: #B82A35;
    }

    .btn-effect::after {
        content: "";
        background-color: #DC143C;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px !important;
        margin-top: -120%;
        opacity: 0;
        transition: all 1.3s;
    }

    .btn-effect:active::after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s;
    }

/*-------------------------- 外框按鈕 --------------------------*/
.Lbtn-border {
    background-color: #fff;
    color: #DC143C;
    border: 2px solid #DC143C;
    padding: 14px 18px;
    box-shadow: none;
}

    .Lbtn-border:hover,
    .Lbtn-border:focus {
        background-color: #DC143C;
        box-shadow: 0 5px 5px rgba(12, 9, 51, .2);
        color: #fff;
    }

    .Lbtn-border::after {
        background-color: transparent;
    }

/*-------------------------- 按鈕尺寸 --------------------------*/
.btn-sm {
    height: 2.875rem;
    min-width: 120px;
    padding: 5px;
}

input[type="submit"].btn-sm {
    padding: 5px;
}

.Lbtn-sm {
    font-size: 1rem;
    padding: 9.5px 18px;
}

.Lbtn-border.Lbtn-sm {
    padding: 7.5px 16px;
}

@media only screen and (max-width: 29.9375em) {
    .btn, .Lbtn {
        font-size: 1rem;
    }
}
/*-------------------------- 深色背景按鈕 --------------------------*/
.deepBg .Lbtn-border {
    background-color: transparent;
    color: #E4F1FE;
    border-color: #E4F1FE;
}

    .deepBg .Lbtn-border:hover,
    .deepBg .Lbtn-border:focus {
        background-color: #E4F1FE;
        color: #007095;
        text-decoration: none;
    }


/*===============================================================================
                           其他特殊樣式 套用 
=================================================================================*/
/*----------------- articlWrap 標籤-----------------*/
.articlWrap {
    margin-top: 20px;
    display: inline-block;
    font-weight: bold;
}

    .articlWrap i {
        color: #aaa;
        padding-right: 5px;
    }

.articlTag {
    color: #327A4B;
    font-weight: normal;
}

    .articlTag:hover,
    .articlTag:focus {
        text-decoration: underline;
        color: #da3a00;
    }

.baseCont .articlTag {
    color: #333;
}

    .baseCont .articlTag:hover {
        text-decoration: none;
        color: inherit;
    }

/*----------------- imitate Radio button-----------------*/
.imitateList {
    margin-bottom: 20px;
}

    .imitateList li {
        display: inline-block;
    }

        .imitateList li + li {
            margin-left: 10px;
        }

        .imitateList li a {
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -webkit-transition: all .2s;
            transition: all .2s;
            border: 1px solid #348550;
            display: inline-block;
            border-radius: 50px;
            padding: 7px 31px;
            line-height: 24px;
            color: #348550;
        }

            .imitateList li a:hover,
            .imitateList li a:focus-visible {
                text-decoration: none;
                background-color: #348550;
                color: #fff;
            }

            .imitateList li a.on {
                background-color: #348550;
                color: #fff;
            }

            .imitateList li a:focus-visible {
                outline: 5px dotted #f09819;
            }

@media only screen and (max-width: 47.9735em) {
    .imitateList li a {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media only screen and (max-width: 29.9375em) {
    .imitateList li a {
        font-size: .875rem;
        padding: 5px 10px;
    }
}

/*----------------- Progress 進度條 -----------------*/
.progressWrap {
}

    .progressWrap + .progressWrap {
        margin-top: 10px;
    }

.progressStyle {
    overflow: hidden;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
}
/*深藍色*/
.progressBar {
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    float: left;
    width: 0;
    height: 100%;
    background-color: #003F8F;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
    line-height: 20px;
    text-align: center;
}

.progressValue {
    font-size: .625rem;
    color: #FFF;
    vertical-align: text-bottom;
    line-height: 20px;
}
/*淺藍色*/
.progressBar-secondary {
    background-color: #1598E6;
}



/*===============================================================================
                                其他修正 
=================================================================================*/

/*-----------------修正Font Awesome-----------------*/
.fa, .fas {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.far {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
}

.fa .fa-input,
.fa-input {
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
}
/*#endregion */

/*----------------- 修正 Select2 style -----------------*/
.MyQueryArea .select2-container--default .select2-selection--multiple {
    border-color: #2C7F9B;
    border-radius: inherit
}

.MyQueryArea .select2-search__field {
    min-height: 1.625em;
    line-height: 1.625em
}

.MyQueryArea .select2-container *:focus {
    outline: 4px dotted #f09819;
}

@media only screen and (max-width: 47.9735em) {
    .MyQueryArea .select2-search__field {
        width: 100%;
    }
}