:root {
  --maincolor: rgba(237, 125, 49, 1);
  --maincolor-opacity: rgba(237, 125, 49, 0.2);
  --lightcolor: rgba(255, 223, 206, 1);
  --hovercolor: rgba(252, 242, 234, 1);
  --titlecolor: rgba(220, 220, 220, 1);
  --txtcolor: rgba(192, 124, 0, 1);
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: auto;
    }
}


/*功能頁簽*/
#content .container-tab .container .nav-link.active {
    border-bottom: 2px solid var(--maincolor)!important;
}

/*頁簽標題*/
#content .title {
    display: flex;
    justify-content: space-between;
    color: var(--maincolor);
}
    #content .title h2:before {
        background-image: url(../Images/Measurement/title.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    /*按鈕*/
    #content button.btn {
        margin: 0.5rem 1.5rem;
        text-indent: 1rem;
        letter-spacing: 1rem;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        background: var(--maincolor);
        border: 1px solid transparent;
    }
        #content button.btn:hover:not(:disabled) {
        color: var(--maincolor);
        background: var(--maincolor-opacity);
    }
        #content button.btn:disabled {
            cursor: not-allowed;
            pointer-events: all;
        }

    #content button.btn-add {
        margin: 0.5rem 0;
        text-indent: 0px;
        letter-spacing: normal;
    }

    #content button.btn-coordinate {
        margin: 0.5rem 0;
        padding: .375rem 1.5rem;
        width: calc(100% - 7rem);
        height: calc(2.5rem + 2px);
        text-indent: 0px;
        letter-spacing: normal;
        border-radius: 0;
    }

    #content button.btn-tip {
        position: absolute;
        top: 0.75rem;
        right: 0.5rem;
        margin: 0;
        padding: 0;
        width: 2rem;
        height: 2rem;
        text-indent: 0;
        background: var(--txtcolor);
        border-radius: 100%;
        cursor: pointer;
    }
        #content button.btn-tip:hover {
            opacity: 0.85;
            background: var(--txtcolor);
        }
            #content button.btn-tip:hover svg {
                transform: scale(1.2);
                animation: 0.8s Shake infinite;
                fill: var(--maincolor);
            }
			    @keyframes Shake {
				    0% { transform: rotate(0deg) scale(1.2); }
				    25% { transform: rotate(15deg) scale(1.2); }
				    50% { transform: rotate(0deg) scale(1.2); }
				    75% { transform: rotate(-15deg) scale(1.2); }
				    100% { transform: rotate(0deg) scale(1.2); }
			    }

    #content .modal {
        padding: 0.25rem .75rem;
        text-align: left;
    }

    #content .form-check-input {
        border-color: var(--maincolor);
    }
        #content .form-check-input:checked {
            background-color: var(--maincolor);
        }
    #content .form-check-input,
    #content .form-check-input + label {
        cursor: pointer;
    }

    /*條件查詢*/
    #content .row > * {
        padding: 0.5rem;
    }

    #content input.form-control,
    #content textarea.form-control,
    #content .form-select {
        width: 100%;
        border: 1px solid var(--maincolor);
        border-radius: 0;
    }
    
    #content .form-control:disabled,
    #content .form-select:disabled {
        border-color: #ccc;
        cursor: not-allowed;
    }
    #content .form-control:disabled {
        background: #fff;
    }
    #content .form-check-input:disabled,
    #content .form-check-input:disabled + label {
        cursor: not-allowed;
    }

    #content .color-red {
        margin-left: -0.25rem;
        color: red;
    }
    #content .input-required {
        padding-right: 0.25rem;
        color: red;
    }

    #content .form-floating-check {
        padding: 1.75rem 0 0.35rem .75rem;
        padding: 1.40rem 0 0.35rem .75rem;
        height: calc(3.5rem + 2px);
        border: 1px solid var(--maincolor);
    }
    #content .form-floating-check .form-check-inline {
        display: inline-flex;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-right: 0.5rem;
        padding: 0;
    }
    #content .form-floating-check > label {
        opacity: .65;
        transform: scale(.85) translateY(-.65rem) translateX(.15rem);
    }
    #content .form-floating-check input.form-check-input {
        margin: 0.25rem 0.25rem 0 0;
    }
    #content .form-floating-check input.form-control {
        display: inline-block;
        margin: 0 0.25rem;
        padding: 0 0 0 0.75rem;
        width: 4rem;
        border-top: none;
        border-right: none;
        border-left: none;
    }
    
    #content #div_step3 .form-floating-check input.form-control {
        width: 100%;
    }
    
    #content .form-floating-coordinate {
        display: flex;
    }
    #content .form-floating-coordinate .form-floating {
        padding-right: 1rem;
        width: calc(100% / 3 - 33px)!important;
    }
    #content .form-floating-coordinate button.btn {
        margin: 0;
    }
    
    #content .form-floating .file-border {
        border: 4px dashed var(--maincolor);
    }
        #content .form-floating .file-border:hover {
            background: var(--hovercolor);
        }
    #content .form-floating .file-file {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }
    #content .form-floating .file-span {
        display: block;
        padding: 3rem 0;
        font-weight: bold;
        color: var(--maincolor);
    }
    #content .form-floating .file-border:hover .file-span {
        transform: scale(1.05);
    }

    /*進階搜尋*/
    #content #sampling .search .row {
        justify-content: flex-end;
    }
    #content #sampling .nav-link.dropdown-toggle {
        margin: 0;
        width: auto;
        color: var(--maincolor);
    }
    #content #sampling .nav-link.dropdown-toggle:hover {
        color: var(--lightcolor);
    }

    /*列表*/
    #content #sampling table.table {
        display: none;
        width: 100%!important;
        border-collapse: separate!important;   
    }
        #content #sampling table.table tbody tr:not(.child):hover,
        #content #sampling table.table tbody tr:not(.child).odd:hover,
        table.dataTable.dtr-inline.collapsed > tbody > tr:hover + tr.child,
        table.dataTable.dtr-inline.collapsed > tbody > tr.odd:hover + tr.child {
            background: var(--hovercolor)!important;
        }
        #content #sampling table.table tbody tr.odd,
        table.dataTable.dtr-inline.collapsed > tbody > tr.odd + tr.child {
            background: rgba(255, 248, 245, 1)!important;
        }
        #content #sampling table.table th {
            text-align: center!important;
            white-space: nowrap;
            color: rgba(255, 255, 255, 1);
            background: rgba(251, 132, 63, 1);
            border: none;
        }
        #content #sampling table.table td {
            font-size: 0.9rem;
            border: none;
        }
            #content #sampling table.table td img {
                display: inline-block;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

    /*datatable*/
        div.dataTables_wrapper > div.row {
           --bs-gutter-x: 1rem;
        }

        /*頁數*/
        div.dataTables_wrapper .row:nth-child(1) > div:nth-child(1) {
            padding: 0 0.5rem!important;
            width: 100%;
        }
        div.dataTables_wrapper div.dataTables_length {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        div.dataTables_wrapper div.dataTables_length select {
            margin: 0 0.25rem;
            width: 85px!important;
        }
        /*搜尋*/
        div.dataTables_wrapper .row:nth-child(1) > div:nth-child(2) {
            display: none!important;
        }
        /*資訊*/
        div.dataTables_wrapper .row:nth-last-child(1) > div:nth-child(1) span {
            color: var(--txtcolor);
        }
        /*分頁*/
        div.dataTables_wrapper div.dataTables_paginate .pagination .page-item.active .page-link {
            color: var(--txtcolor);
            background-color: rgba(252, 243, 234, 1);
            border-color: rgba(127, 127, 127, 1);
        }

        /*responsive*/
        table.dataTable.dtr-inline.collapsed > tbody > tr > td.child, 
        table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
            text-align: left;
        }
        table.dataTable > tbody > tr.child ul.dtr-details {
            width: 100%;
        }
        table.dataTable > tbody > tr.child ul.dtr-details > li {
            padding: .25em 0;
            border: none;
        }
        table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
            padding-bottom: 0;
        }
        table.dataTable > tbody > tr.child span.dtr-title {
            min-width: 95px;
        }

        table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, 
        table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
            top: calc(50% - 12.5px);
            left: calc(50% - 12.5px);
            margin: auto;
            font-size: 1.2rem;
            font-weight: bold;
            background-color: var(--maincolor);
            box-shadow: none;
        } 
        table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover:before {
            background-color: var(--txtcolor);
        }
        table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, 
        table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
            background-color: var(--txtcolor);
        }

        /*processing*/
        div.dataTables_wrapper div.dataTables_processing {
            display: block;
            position: relative;
            top: 0;
            left: 0;
            margin: auto;
            width: 80%;
            font-weight: bold;
            border: 1px solid rgba(127, 127, 127, 0.5);
        }


    /*詳細資料*/
    #content #sampling .detail {
        display: none;
    }
        #content #sampling .detail .function {
            display: flex; 
            justify-content: flex-end; 
            align-items: center; 
            margin: 0;
        }
            #content #sampling .detail .function span {
                width: auto; 
                font-size: 0.95rem; 
            }
            #content #sampling .detail .function button {
                margin-left: 0.25rem;
                margin-right: 0.25rem;
                width: auto;
            }
                #content #sampling .detail .function button:nth-child(3) {
                    margin-left: 0;
                }
                #content #sampling .detail .function button:nth-last-child(1) {
                    margin-right: 0;
                }

        #content #sampling .detail .row {
            margin: 0;
        }
        #content #sampling .detail .detail-title {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            color: rgba(255, 255, 255, 1);
            background: var(--maincolor);
        }
            #content #sampling .detail .detail-title .btn-Edit {
                position: absolute;
                right: 0;
                margin: 0;
                background: transparent;
                border: 1px solid var(--maincolor);
                border-radius: 0;
            }
                #content #sampling .detail .detail-title .btn-Edit img {
                    height: 20px;
                }
                #content #sampling .detail .detail-title .btn-Edit:hover img {
                    transform: scale(1.2);
                    animation: 0.8s Shake infinite;
                }

        #content #sampling .detail .detail-content {
            border: 1px solid var(--maincolor);
        }
        #content #sampling .detail .detail-content .row {
            margin: 0;
        }
        #content #sampling .detail .detail-content .row div {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        #content #sampling .detail .detail-content .row div:nth-child(odd) {
            justify-content: center;
            background: var(--lightcolor);
            border: 0.25rem solid rgba(255, 255, 255, 1);
        }
        
        #content #sampling .detail table {
            min-width: 100%;
        }
            #content #sampling .detail table tr:nth-child(odd) {
                background: rgba(252, 242, 234, 0.5);
            }
            #content #sampling .detail table th {
                padding: 0.5rem;
                background: var(--lightcolor);
            }
            #content #sampling .detail table td {
                padding: 0.5rem;
            }

        #content #sampling .detail .data-empty {
            padding: 0.5rem;
            text-align: center;
            font-weight: bold;
        }

        #content #sampling h3,
        #content #longterm h3 {
            margin: 0;
            text-align: center;
            font-size: calc(1rem + 0.25vw);
            font-weight: bold;
        }
        #content #sampling h4,
        #content #longterm h4 {
            margin: 0;
            text-align: center;
            font-size: calc(0.85rem + 0.25vw);
            font-weight: bold;
        }

    /*新增資料*/
    #content #sampling .add,
    #content #longterm .add {
        display: none;
    }

    #content #sampling .add div.div_step,
    #content #longterm .add div.div_step {
        display: none;
    }

        #content #sampling .form-select,
        #content #longterm .form-select {
            padding-bottom: 0.5rem;
        }
        
        #content #sampling .add ul {
            margin: 0;
            list-style: decimal;
        }

        #content #sampling .add table,
        #content #longterm .add table {
            width: 100%;
        }
        #content #sampling .add table tr:nth-child(odd),
        #content #longterm .add table tr:nth-child(odd) {
            background: var(--hovercolor);
        }
        #content #sampling .add table th,
        #content #longterm .add table th {
            padding: 0.5rem;
            color: rgba(255, 255, 255, 1);
            background: var(--maincolor);
        }
        #content #sampling .add table td,
        #content #longterm .add table td {
            padding: 0.5rem;
        }
        #content #sampling .add table td .btn + .btn,
        #content #longterm .add table td .btn + .btn {
            margin-left: 0.25rem;
        }

        #content #sampling .add .data-empty,
        #content #longterm .add .data-empty {
            padding: 0rem 1rem 1rem;
            text-align: center;
            font-weight: bold;
        }

        /*表格中表格*/
        #content #sampling .add .table-list th, #content #sampling .add .table-list td,
        #content #longterm .add .table-list th, #content #longterm .add .table-list td {
            width: calc(100% / 6);
            border: 1px solid #fff;
        }
        #content #sampling .add .table-list th,
        #content #longterm .add .table-list th {
            color: #5b5b5b;
            background: var(--hovercolor);
        }
        #content #sampling .add .table-list td,
        #content #longterm .add .table-list td {
            text-align: left;
            vertical-align: top;
            background: #fff;
        }

        #content #sampling .add .table-list table th, #content #sampling .add .table-list table td,
        #content #longterm .add .table-list table th, #content #longterm .add .table-list table td {
            width: auto;
        }

        #content #sampling .add .table-list button.btn-tip,
        #content #longterm .add .table-list button.btn-tip {
            position: inherit;
        }
        #content #sampling .add .table-list .form-floating-check,
        #content #longterm .add .table-list .form-floating-check {
            padding: 0;
            height: auto;
            border: none;
        }
        #content #sampling .add .table-list .date .input-group-addon,
        #content #longterm .add .table-list .date .input-group-addon {
            padding: 0.35rem 0.75rem;
            z-index: 4;
        }
        .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
            cursor: pointer;
        }   

        /*測值輸入結果*/
        #content #sampling .add table.table-Result {
            display: none;
            margin: 2rem auto;
            width: auto;
        }
        #content #sampling .add table.table-Result tr td {
            background: rgba(255, 255, 255, 1);
        }
        #content #sampling .add table.table-Result td:nth-child(1) {
            text-align: right;
        }
        #content #sampling .add table.table-Result td:nth-child(2) {
            font-weight: bold;
            color: rgba(0, 0, 255, 1);
        }
        
        #content #sampling .add .Substation_Sub,
        #content #sampling .add .TransmissionDistributionWire_Sub,
        #content #sampling .add .FloorStandingTransformer_Sub,
        #content #sampling .add .FM_Sub,
        #content #sampling .add .AM_Sub {
            overflow-x: auto;
        }
        #content #sampling .add .TransmissionDistributionWire table tr,
        #content #sampling .add .FloorStandingTransformer table tr,
        #content #sampling .add .FM_Sub table tr,
        #content #sampling .add .AM_Sub table tr {
            background: rgba(255, 255, 255, 1);
        }
        #content #sampling .add .TransmissionDistributionWire table td,
        #content #sampling .add .FloorStandingTransformer table td,
        #content #sampling .add .FM_Sub table td,
        #content #sampling .add .AM_Sub table td {
            padding: 0.25rem;
        }
        #content #sampling .add .FM_Sub table td input:disabled,
        #content #sampling .add .AM_Sub table td input:disabled {
            background: rgba(224, 224, 224, 1);
            border: 1px solid #ccc;
            cursor: not-allowed;
        }



@media (max-width: 768px) {
    /*新增資料*/
    #content #div_step3 .form-floating-check .form-check-inline {
        display: block;
    }
    #content #div_step3 .form-floating-check input.form-control {
        max-width: calc(100% - 16px - 0.25rem)!important;
        margin-left: calc(16px + 0.25rem);
    }
}

@media (min-width: 768px) {
    /*欄位寬度*/
    #content .col-md-50 {
        flex: 0 0 auto;
        width: 50%;
    }
    #content .col-md-40 {
        flex: 0 0 auto;
        width: 40%;
    }
    #content .col-md-33 {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    #content .col-md-30 {
        flex: 0 0 auto;
        width: 30%;
    }
    #content .col-md-25 {
        flex: 0 0 auto;
        width: 25%;
    }
    #content .col-md-20 {
        flex: 0 0 auto;
        width: 20%;
    }
}