@charset "utf-8";
/*CSS Info ======================================================================
File Name: Grid.css
Create Editor: Eliam
Create Date: 2023/03/15
Last Editor: Yeats
Last Date: 2023/04/07
Version： 3.2
---------------------------
【 風格 】
    施工機具管理 - 橘黃綠色系
	jQuery JavaScript Library v1.12.4
【 Table of Contents 】
	MyGridView	100%寬度
		MyHead
		MyRow
		MyAlt
		MyPager
		MyOver
	MyTable  單欄樣式
		Alt
		Over
	MyQueryArea	MyTable 單欄樣式
	btn 置中   三樣式應用
	修正jQuery UI
=================================================================================*/
/*===============================================================================
                           General style 
=================================================================================*/
section {
    margin-top: 40px;
    margin-bottom: 20px;
}

.Des {
    color: #97AF8F;
    font-size: 1rem;
}

span.Alert {
    color: #E17473;
    padding-left: .25rem;
}

.required::after {
    content: "*";
    color: #E17473;
    position: absolute;
}

.AddGap {
    margin: 0.5em 0;
}

    .AddGap span {
        line-height: 46px;
    }

/**** Form general ****/
/*table {
    color: #101010;
    font-size: 1.125rem;
}*/

table.thin {
    font-size: 1rem;
}

table p {
    padding: .125rem 0;
}

table th, table td {
    vertical-align: middle;
}

td span {
    margin-left: 3rem;
}

td img {
    vertical-align: middle;
}

.MyQueryArea caption, .MyGridView caption {
    color: #101010;
    font-size: 1.375rem;
    position: absolute;
    top: -2.25rem;
    /*left: 1rem;*/
    left: 0;
}

caption span {
}

    caption span::before {
        content: '\f111';
        font-family: 'Font Awesome 6 Free';
        font-weight: bold;
        font-size: .75rem;
        margin-right: 10px;
        vertical-align: middle;
        color: #8F8F8F;
    }

.MyQueryArea td span {
    margin-left: 0;
}

/**** 選頁樣式 ****/
.MyPager {
    color: #101010;
    font-size: 1rem;
    text-align: right;
    background: none;
    margin-top: 2px;
    padding: 5px;
}

    .MyPager .Alert {
        color: #E17473;
    }

    .MyPager select {
        width: 90px;
        min-width: initial;
        margin: 0 12px;
        color: #101010;
        border-radius: 0;
        background-image: linear-gradient(45deg, transparent 50%, #799471 50%), linear-gradient(135deg, #799471 50%, transparent 50%);
        background-position: calc(100% - 16px) calc(.75em + 2px), calc(100% - 10px) calc(.75em + 2px), calc(100% - 2.15em) 0.3em;
    }

/**** option style ***/
/*-------控制項樣式--------*/
select, input[type=radio], input[type=checkbox], input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    box-sizing: border-box;
    margin: .1rem 0;
}

input::placeholder {
    color: #8F8F8F;
}

input[type=radio], input[type=checkbox] {
    background: #ffffff;
    border: 1px solid #799471;
    outline: none;
    width: 18px;
    height: 18px;
    position: relative;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
}

input[type=radio] {
    border-radius: 50%;
    padding: 0 3px;
}

input[type=checkbox] {
    border-radius: 2px;
}

input[type=radio]:hover, input[type=radio]:checked, input[type=radio]:focus {
    background: #799471;
    border: 1px solid #799471;
    /*transform: scale(1.2);*/
    cursor: pointer;
}

    input[type=radio]:checked:before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #FFFFFF;
        position: absolute;
        top: 4px;
        left: 4px;
    }

input[type=checkbox]:hover, input[type=checkbox]:checked, input[type=checkbox]:focus {
    background: #799471;
    cursor: pointer;
    border: 1px solid #799471;
}

    input[type=checkbox]:checked:before {
        content: '\f00c';
        color: #FFFFFF;
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: .75rem;
        text-align: center;
        position: absolute;
        top: 2px;
        left: 2px;
    }

input[type=radio] ~ label, input[type=checkbox] ~ label {
    color: #101010;
    font-size: 1.125rem;
    vertical-align: middle;
    padding: 0 2px;
    margin: 0;
    margin-right: 1rem;
}

textarea {
    color: #101010;
    background: #fff;
    border: 1px solid #799471;
    line-height: 1.5rem;
    vertical-align: text-top;
    min-height: 1.5rem;
    width: 90%;
    padding: .25rem;
    box-sizing: border-box;
}

    textarea:focus {
        color: #101010;
        background: #FFFFFF;
        border: 1px solid #101010;
    }

    textarea::placeholder {
        color: #8F8F8F;
    }

input[type=text] {
    font-size: 1.125rem;
    padding: .5rem .75rem;
}

input[type=number] {
    padding-left: .75rem;
}

select, input[type=text], input[type=number] {
    color: #101010;
    background: #fff;
    border: 1px solid #799471;
    border-radius: 5px;
    height: 34px;
}

    select:focus, input[type=text]:focus, input[type=number]:focus {
        color: #101010;
        background: #FFFFFF;
        border: 1px solid #101010;
    }

select {
    color: #101010;
    font-size: 1rem;
    line-height: 1rem;
    min-width: 15rem;
    padding: 0 2.5rem 0 .5rem;
    margin-bottom: .5rem;
    background-image: linear-gradient(45deg, transparent 50%, #799471 50%), linear-gradient(135deg, #799471 50%, transparent 50%), linear-gradient(to right, #799471, #799471);
    background-position: calc(100% - 16px) calc(.75em + 2px), calc(100% - 10px) calc(.75em + 2px), calc(100% - 2.15em) 0.3em;
    background-size: 6px 6px, 6px 6px, 1px 1.5em;
    background-repeat: no-repeat;
}

    select:focus {
        background-image: linear-gradient(45deg, #799471 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #799471 50%), linear-gradient(to right, #799471, #799471);
        background-position: calc(100% - 10px) .85rem, calc(100% - 16px) .85rem, calc(100% - 2.15em) 0.3em;
        background-size: 6px 6px, 6px 6px, 1px 1.5em;
        background-repeat: no-repeat;
    }

section option {
    color: #101010;
}

/* disabled setting */
input[type=radio]:disabled, input[type=checkbox]:disabled {
    background-color: #cecece;
    cursor: not-allowed;
}

    input[type=radio]:disabled:before {
        background: #969696;
    }

    input[type=checkbox]:disabled:before, input[type=radio]:disabled ~ label, input[type=checkbox]:disabled ~ label {
        color: #969696;
    }

select:disabled, textarea:disabled, input[type=text]:disabled, input[type=number]:disabled {
    color: #777;
    background-color: #eee;
    border: 1px solid #ccc;
    cursor: not-allowed;
}

/**** small interval ****/
.thin select, .thin input[type="text"], .thin input[type="number"] {
    height: 34px;
    margin: .125rem;
}

/*IE 修正*/

select::-ms-expand {
    display: none;
}
/*===============================================================================
                           Grid View 或列表表格設定 
=================================================================================*/
.GridViewCont {
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.MyGridView, .MyGridView.thin {
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #ffffff;
}

    .MyGridView caption {
        /*top: -2rem;*/
    }

    .MyGridView tr:hover {
        background-color: #D5E1D1;
        cursor: pointer;
    }

    .MyGridView th, .MyGridView td {
        vertical-align: middle;
        padding: .75rem;
    }

    .MyGridView tbody th, .MyGridView th {
        color: #ffffff;
        font-size: 1.25rem;
        /*min-width: 5rem;*/
        background-color: #799471;
    }

    .MyGridView tbody td, .MyGridView td {
        color: #101010;
        border-bottom: 1px solid #D5E1D1;
        font-size: 1.125rem;
    }

    .MyGridView tr:nth-last-child(1) td {
        border-bottom: none;
    }

    .MyGridView th a {
        color: #EACBD1;
    }

        .MyGridView th a:hover {
            color: #ffffff;
        }

    .MyGridView td a, .Mytable td a {
        color: #799471;
        position: relative;
        transition: all .3s ease-in;
    }

        .MyGridView td a::before, .Mytable td a:before {
            content: "";
            height: 1px;
            width: 100%;
            background-color: #EACBD1;
            position: absolute;
            left: calc(50% - 50%);
            bottom: -.125rem;
            transition: all .3s ease-in;
        }

        .MyGridView td a:hover, .Mytable td a:hover {
            color: #799471;
            font-weight: bold;
        }

            .MyGridView td a:hover::before, .Mytable td a:hover::before {
                width: 110%;
                left: calc(50% - 55%);
                background-color: #EACBD1;
            }

    .MyGridView .MyOver, .MyGridView .MyAlt {
        background-color: transparent;
    }

    /**** small interval ***/
    .MyGridView.thin th, .MyGridView.thin td {
        font-size: 1rem;
        padding: .5rem;
    }

/*===============================================================================
                           FontView、DetailVeiw套用 
=================================================================================*/
.Mytable {
    background-color: #F6F6F6;
    width: 100%;
    border-top: none;
    margin-bottom: 1rem;
    position: relative;
}

    .Mytable.normal {
        background-color: #D5E1D1;
        border: 1px solid #799471;
    }

    .Mytable caption {
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: bold;
        background: #799471;
        padding: .75rem 0;
    }

    .Mytable th, .Mytable td {
        vertical-align: text-top;
        padding: .75rem .25rem;
    }

    .Mytable th, .Mytable thead th, .Mytable tbody th {
        color: #101010;
        width: 15%;
        padding-right: 1.25rem;
        text-align: right;
        position: relative;
    }

    .Mytable.normal th {
        color: #101010;
    }

    .Mytable td {
        text-align: left;
    }

    /**** small interval ***/
    .Mytable.thin th {
        padding: .25rem;
        padding-right: 1rem;
        width: 12%;
    }

    .Mytable.thin td {
        padding: .25rem;
    }

/**** 特別樣式 ***/
.basicInfo {
    background-color: #f3f3f3;
}

table.Date {
    border-left: 1px solid #799471;
    border-right: 1px solid #799471;
    border-bottom: 1px solid #799471;
}

.Date caption {
    color: #ffffff;
    font-weight: bold;
    background: #799471;
    border-left: 1px solid #799471;
    border-right: 1px solid #799471;
    border-top: 1px solid #799471;
}

.Date thead th, .Date tbody th {
    color: #101010;
    text-align: center;
    font-weight: normal;
    background: #D5E1D1;
    width: auto;
    padding: .5rem;
    border-bottom: 1px solid #97AF8F;
}

.Date tbody th {
    width: 15%;
}

.Date tbody td {
    color: #101010;
    text-align: right;
    background-color: #fff;
    border: 1px dotted #97AF8F;
    width: auto;
}

    .Date tbody td.disable {
        color: #D4E0EE;
    }

/**** 說明資料區塊 ***/
.scription {
    /*width: 50%;*/
    border: 2px dotted #97AF8F;
    padding: 1.25rem;
    box-sizing: border-box;
    position: relative;
}

.scriptionArea {
    padding: 1.75rem;
}

.scription.middle {
    width: 75%;
}

.scription.large {
    width: 100%;
}

.scription table th {
    /*width: 25%;*/
    width: 20%;
    text-align: right;
}

.scription table td {
    text-align: left;
}

.scription p {
    color: #799471;
    /*font-size: 1.25rem;*/
    font-size: 1.75rem;
    font-weight: bold;
    position: absolute;
    top: -1rem;
    left: 3rem;
    background-color: #fff;
    padding: 0 .5rem;
}

.scription table {
    background-color: #F6F6F6;
    width: 100%;
}

    .scription table th, .scription table td {
        padding: .75rem .5rem;
    }

    .scription table th {
        color: #101010;
    }

.scription textarea.scriptionBlock {
    width: 100%;
}

.scripCont {
    padding: 15px 10px 0;
}

    .scripCont .CommandArea {
        margin: 0;
    }

    .scripCont table {
        margin: 10px 0;
    }

        .scripCont table th {
            text-align: left;
            width: 8rem;
            padding-left: 20px;
        }

        .scripCont table span {
            margin-left: 5px;
        }

.scription .scripCont p {
    color: #101010;
    font-size: 1.125rem;
    font-weight: normal;
    position: relative;
    top: 0;
    left: 0;
}

    .scription .scripCont p + p {
        color: #DD6836;
    }

        .scription .scripCont p + p span {
            color: #B0B0B0;
        }


@media only screen and (max-width: 1023px) {
    .scription {
        width: 100%;
    }
}

/*===============================================================================
                           查詢區域 套用 
=================================================================================*/
.MyQueryArea {
    background-color: #FFFFFF;
    border: 2px solid #799471;
    border-radius: 10px;
    padding: 25px .5rem;
    position: relative;
    box-sizing: border-box;
}

    /*.MyQueryArea caption {
        left: 0;
    }*/

    .MyQueryArea th, .MyQueryArea td {
        padding: .5rem 0;
        width: auto;
        vertical-align: middle;
        font-size: 1.125rem;
    }

    .MyQueryArea th {
        text-align: right;
        vertical-align: top;
        width: 30%;
        padding-top: 1rem;
        padding-right: 1rem;
        font-weight: bold;
    }

        .MyQueryArea th.delGap {
            padding-top: .75rem;
        }

    .MyQueryArea td {
        text-align: left;
        /*width: 37%;*/
        line-height: 1.75rem;
    }

        .MyQueryArea td span.midText {
            padding-left: 3px;
            padding-right: 3px;
        }

/*===============================================================================
                           選項區
=================================================================================*/
.Card {
    margin-bottom: 30px;
}

    .Card p {
        color: #101010;
        font-size: 1.25rem;
        line-height: 2rem;
        padding-left: .5rem;
    }

    .Card .cardCont {
        background: #D5E1D1;
        border: 1px solid #799471;
        border-radius: 3px;
        padding: 1rem 1.25rem;
        margin-top: .5rem;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: space-around;
        align-items: center;
    }

        .Card .cardCont div {
            width: 32%;
            margin: .25rem 0;
        }

            .Card .cardCont div input[type=radio] ~ label,
            .Card .cardCont div input[type=checkbox] ~ label {
                color: #101010;
            }

                .Card .cardCont div input[type=radio] ~ label > span,
                .Card .cardCont div input[type=checkbox] ~ label > span {
                    color: #E05F62;
                    line-height: normal;
                    padding-left: .25rem;
                }

            /*.Card .cardCont div > input[type=checkbox] {
                background: #799471;
            }*/

            .Card .cardCont div > input[type=checkbox]:hover,
            .Card .cardCont div > input[type=checkbox]:checked {
                background: #799471;
            }

                .Card .cardCont div > input[type=checkbox]:checked:before {
                    color: #FFFFFF;
                }

    .Card .link {
        margin: 40px 0 20px;
    }

    .Card a {
        color: #fff;
        font-size: 1.25rem;
        background-color: #73C5C5;
        border: 1px solid #fff;
        border-radius: 50px;
        padding: 10px 40px;
        margin-right: 40px;
    }

        .Card a:hover {
            color: #70B5B5;
            background-color: #fff;
            border: 1px solid #9CDEDE;
            box-shadow: 0 2px 5px rgba(135, 226, 233, 0.4);
        }

    .Card .cardCont.inspect {
        border-top: 3px solid #F6EDE6;
        border-bottom: 1px solid #F6EDE6;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

        .Card .cardCont.inspect label {
            color: #B08D80;
            font-size: 1.125rem;
            width: 19%;
            border-radius: 5px;
            border: 2px dashed #F1DBD0;
            background-color: rgba(255, 255, 255, .8);
            padding: .75rem 1rem;
            margin: .75% 1%;
        }

            .Card .cardCont.inspect label.mark {
                background: #FAEEE6;
                border: 1px solid #F1DBD0;
            }

            .Card .cardCont.inspect label span {
                color: #EC9F81;
                padding-left: .25rem;
                line-height: normal;
            }

            .Card .cardCont.inspect label > input[type=radio] {
                border: 2px solid #EFCCBA;
                background: rgba(255, 255, 255, 0);
                width: 16px;
                height: 16px;
                bottom: 2px;
            }

                .Card .cardCont.inspect label > input[type=radio]:hover,
                .Card .cardCont.inspect label > input[type=radio]:checked {
                    background: #EC9F81;
                    border: 2px solid #EC9F81;
                }

                    .Card .cardCont.inspect label > input[type=radio]:checked:before {
                        background: #EC9F81;
                        top: 2px;
                        left: 2px;
                    }

/*===============================================================================
                           Button setting 
=================================================================================*/
.btn {
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    background-color: #799471;
    border: 2px solid #D5E1D1;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: .5rem 1.5rem;
    margin: .25rem;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    display: inline-block;
    cursor: pointer;
    zoom: 1;
    overflow: visible; /* the overflow property removes extra width in IE */
}

table .btn {
    font-size: 1.125rem;
    padding: .35rem 1.125rem;
    margin: 0 .25rem;
}

table.thin .btn {
    font-size: 1rem;
    padding: .25rem .75rem;
}

.btn:hover, .btn:focus {
    border: 2px solid #799471;
    background-color: #ffffff;
    color: #101010;
}

.btnImp {
    background-color: #E17473;
    border: 2px solid #F5CEC7;
}

    .btnImp:hover, .btnImp:focus {
        background-color: #ffffff;
        border: 2px solid #E17473;
    }

.btnPoint {
    background-color: #648AC4;
    border: 2px solid #D4E0EE;
}

    .btnPoint:hover, .btnPoint:focus {
        background-color: #ffffff;
        border: 2px solid #648AC4;
    }

.logfoot {
    background-color: #AFCBBF;
    border: none;
}

    .logfoot:hover {
        background-color: #688978;
        border: none;
    }

.btn:disabled {
    cursor: not-allowed;
    color: #bbb;
    background-color: #efefef;
}

/**** 步驟返回按鈕樣式 ***/
.btn.stepbtn, .btn.backbtn {
    color: #101010;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    background-color: #EACBD1;
    box-shadow: 1px 1px 3px #E9EAE2;
    padding: .45rem 2rem;
}

    .btn.stepbtn:hover, .btn.backbtn:hover {
        border: none;
        background-color: #AB7781;
        color: #ffffff;
        box-shadow: 1px 1px 3px #92C6E4;
    }

/**** 一般按鈕區 ***/
.CommandArea {
    text-align: center;
    margin: 10px 5px 30px 5px;
}

    .CommandArea.txtLeft {
        text-align: left;
    }

/**** 搜尋按鈕區 ***/
.MyQueryArea .CommandArea {
    margin: .75rem 0;
    text-align: center;
    min-height: 60px;
    box-sizing: border-box;
}

    .MyQueryArea .CommandArea .btn {
        color: #fff;
        font-size: 1.25rem;
        border: 2px solid #D5E1D1;
        background-color: #799471;
        padding: .5rem 1.5rem;
        margin: .25rem 1.25rem;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

        .MyQueryArea .CommandArea .btn:hover, .MyQueryArea .CommandArea .btn:focus {
            color: #101010;
            background-color: #fff;
            border: 2px solid #799471;
            box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
        }

/**** 返回步驟按鈕區 ***/
.btnGrp {
    text-align: center;
    min-height: 40px;
    margin: 1.25rem 0 1.5rem;
    position: relative;
}

    .btnGrp.fixdown {
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, .35);
        box-sizing: border-box;
        margin: 0;
        z-index: 5;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

        .btnGrp.fixdown input {
            margin-top: 1.5rem;
            margin-bottom: 1rem;
        }

    .btnGrp .btn.stepbtn, .btnGrp .btn.backbtn {
        position: absolute;
        top: 7px;
    }

    .btnGrp .btn.stepbtn {
        right: 0;
    }

    .btnGrp .btn.backbtn {
        left: 0;
    }

/**** 類別按鈕選項 ***/
.itembtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .itembtn div {
        text-align: center;
        border: 3px solid #CCC3B6;
        min-width: 32%;
        padding: 16px;
        margin: 10px 0;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    .itembtn p {
        font-size: 1.25rem;
        line-height: 1.5rem;
        min-width: 7.5rem;
        margin: 0 auto;
        position: relative;
        -webkit-font-smoothing: antialiased;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    .itembtn div:hover, .itembtn div.mark {
        background-image: url(../images/cloud-meatball.png);
        background-position: center left +40px;
        background-repeat: no-repeat;
        background-size: 32px;
        border: 3px solid #BCDDC4;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        cursor: pointer;
    }

        .itembtn div:hover p, .itembtn div.mark p {
            transform: translateX(18px);
        }

    .itembtn.txtrow div {
        min-width: 202px;
    }

    .itembtn.txtrow p {
        width: 7.5rem;
    }

    .itembtn.txtrow div:hover, .itembtn.txtrow div.mark {
        background-position: center left +10px;
    }


/*-----------------修正jQuery UI-----------------*/
.ui-datepicker select.ui-datepicker-month {
    width: 30%;
}

.ui-datepicker select.ui-datepicker-year {
    /*width: 40%;*/
}

.radioBtnArea {
    width: 100%;
    box-sizing: border-box;
    border-top: 3px solid #F6EDE6;
    border-bottom: 1px solid #F6EDE6;
    background-color: #FFFCFA;
    padding: 1rem 1.25rem;
}

.card_radioList {
}

    .card_radioList input {
        opacity: 0;
        margin: 0;
        margin-left: 24px;
        padding: 0;
    }

        .card_radioList input[type="radio"] ~ label {
            vertical-align: baseline;
            margin-left: -32px;
            margin-right: 1rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
            color: #B08D80;
            width: 19%;
            display: inline-block;
            padding: 1rem 0;
            padding-left: .75rem;
            padding-right: 1.75rem;
            border-radius: 5px;
            border: 2px dashed #F1DBD0;
            background-color: rgba(255, 255, 255, .8);
        }

        .card_radioList input[type="radio"]:hover + label::before {
            background-color: #EC9F81;
            transition: all .3s ease-in-out;
        }

        .card_radioList input:not(input:checked):hover, .card_radioList input[type="radio"]:not(input:checked):hover + label:not(label:checked) {
            transform: translateY(-10px);
            transition-duration: .3s;
        }

        .card_radioList input[type="radio"]:checked + label::before {
            background-color: #EC9F81;
        }

        .card_radioList input[type="radio"]:checked + label {
            background-color: #FAEEE6;
            border: 2px solid #F1DBD0;
            transition: all .1s ease-in-out;
        }

    .card_radioList label::before {
        content: " ";
        width: 16px;
        height: 16px;
        display: inline-block;
        border-radius: 50%;
        background-color: #ffffff;
        border: 2px solid #EFCCBA;
        vertical-align: middle;
        margin-right: 5px;
    }

/*.card_radioList label::after {
        content: " ";
        width: 19%;
        display: inline-block;
        padding: 1.5rem 1rem;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, .8);
        border: 2px dashed #F1DBD0;
    }*/

/*-----------------個別設定-----------------*/

.MyQueryArea {
    padding-top: 25px;
    padding-bottom: 6px;
}

input[type="date"], input[type="month"] {
    border: 1px solid #799471;
    border-radius: 5px;
}

input[type=radio] ~ label, input[type=checkbox] ~ label {
    margin-right: 20px;
    margin-left: 3px;
}

.Mytable.thin th {
    padding-top: .8rem;
    padding-bottom: .8rem;
    width: 20%;
    padding-left: 3rem;
    background-color: #ebebeb;
    border-bottom: 1px dotted #8F8F8F;
}

.Mytable.thin tr:last-child th {
    border-bottom: none;
}

.Mytable.thin td {
    padding-left: 1rem;
    padding-right: 4rem;
}

.MyGridView.fileDetails tr td:first-child::before {
    content: '\f15b';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    margin-right: .5rem;
    color: #799471;
}

.MyPager a:hover, .MyPager a:focus {
    font-weight: bold;
}

.GridViewCont {
    max-width: 1360px;
    /*overflow-x: scroll;*/
    overflow-x: auto;
    /*margin-top: 20px;*/
}

/*-----------------Historical Record 個別設定-----------------*/

.MyQueryArea.MyQueryArea_historical {
    padding: 25px 100px 6px 100px;
}

    .MyQueryArea.MyQueryArea_historical th {
        text-align: right;
        width: 15%;
        padding-bottom: 1rem;
        /*padding-right: 0;*/
    }

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) {
    .MyQueryArea.MyQueryArea_historical {
        padding: 25px 60px 6px 25px;
    }
}

/*-----------------RealTime Data 個別設定-----------------*/

.RTData_Sec1 .MyQueryArea {
    width: calc(100% - (250px + 40px));
    padding-left: 40px;
    padding-right: 40px;
}

    .RTData_Sec1 .MyQueryArea table tbody th {
        width: 15%;
    }

/*-----------------圖表分析 個別設定-----------------*/

.MyQueryArea.MyQueryArea_CA {
    padding: 0 20px 0 60px;
}

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table th {
        width: 12%;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td {
        width: 42%;
        padding: .5rem 5px;
        vertical-align: baseline;
    }

        .MyQueryArea.MyQueryArea_CA .tab-content_02 table td:nth-child(3) {
            border-left: 2px dotted #D5E1D1;
        }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table tr:first-child td {
        font-weight: bold;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table tr:nth-child(2) td {
        vertical-align: top;
    }

    .MyQueryArea.MyQueryArea_CA table td .radio-row, .MyQueryArea.MyQueryArea_CA table td .long-text-container, .MyQueryArea.MyQueryArea_CA table td .check-row {
        display: flex;
        flex-wrap: wrap;
    }

    .MyQueryArea.MyQueryArea_CA table td .radio-container {
        padding: 2px 0;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_01 table td .check-row .check-container2 {
        width: 22%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td .radio-row .radio-container {
        width: 33%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td .long-text-container .radio-container {
        width: 50%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td .radio-row .radio-container2_1 {
        width: 33%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td .radio-row .radio-container2_2 {
        width: 36%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_03 table td .radio-row .radio-container7 {
        width: 13%;
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_03 table td .long-text-container .radio-container7 {
        /*width: 25%;*/
        line-height: 1.5rem;
    }

    .MyQueryArea.MyQueryArea_CA .tab-content_03 table td .long-text-container .radio-container {
        width: 25%;
        line-height: 1.5rem;
    }

.div_relate .GridViewCont {
    /*width: calc(100% - 60px - 450px);*/
    width: calc(100% - 60px - 750px);
    height: fit-content;
}

    .div_relate .GridViewCont td {
        padding: 2.65% .75rem;
    }

/*圖表分析 select2設定*/

.MyQueryArea.MyQueryArea_CA .tab-content_02 table td .select2-container--default {
    width: 100% !important;
}

.MyQueryArea.MyQueryArea_CA .tab-content_02 table td .select2-selection--multiple {
    width: 100%;
}

    .MyQueryArea.MyQueryArea_CA .tab-content_02 table td .select2-selection--multiple .select2-search__field {
        width: 100% !important;
    }

.MyQueryArea.MyQueryArea_CA table td .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #799471;
    border: 1px solid #D5E1D1;
    color: #ffffff;
}

.MyQueryArea.MyQueryArea_CA table td .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
}

    .MyQueryArea.MyQueryArea_CA table td .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ffffff;
    }

.MyQueryArea.MyQueryArea_CA .tab-content_08 table td .select2-container--default {
    width: 100% !important;
}

    .MyQueryArea.MyQueryArea_CA .tab-content_08 table td .select2-container--default .select2-selection--multiple {
        width: 100% !important;
    }
.MyQueryArea.MyQueryArea_CA .tab-content_08 table td .select2-selection--multiple .select2-search__field {
    width: 100% !important;
}
.MyQueryArea.MyQueryArea_CA .tab-content_08 table td .check-row .check-container2 {
    width: 22%;
    line-height: 1.5rem;
}


.MyQueryArea.MyQueryArea_CA .tab-content_05 table td .radio-row .radio-container2 {
    width: 33%;
    line-height: 1.5rem;
}

/*end*/
.ui-datepicker-title > select {
    min-width: 45%;
}

.ui-datepicker.ui-widget {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}