/**/
@media only screen and (min-width: 992px) {
    nav {
        padding: 0 16px;
    }
}

*{
    font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-size: 16px;*/
}
body{
    overflow-y: scroll !important;
}
.SearchArea label{
    width: 100%;
}

.navRight{
    float: right;
}
.navLogo{
    margin: 0 16px;
}
.navIcon{
    float: left;
    margin-right: 16px;
}
.navIcon>a{
    color: #fff;
}
.navIcon1{
    display: inline-block;
}
.navIcon2{
    display: inline-block;
    vertical-align: super;
}
/*.jBox-closeButton-title .jBox-closeButton svg {*/
    /*width: 30px;*/
    /*height: 30px;*/
    /*margin-top: -14px;*/
    /*margin-right: -6px;*/
/*}*/
/*.jBox-closeButton:hover path {*/
    /*fill: #AF1F1F;*/
/*}*/
/*.jBox-closeButton path {*/
    /*fill: #d47a6b;*/
/*}*/

.jBox-closeButton-box .jBox-closeButton {
    top: -15px;
    right: -13px;
    width: 30px;
    height: 30px;
}
.jBox-closeButton-box .jBox-closeButton svg {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-right: -9px;
}
.jBox-closeButton path {
    fill: #891212;
}

.demo-container {
    box-sizing: border-box;
    width: 100%;
    height: 360px;
    padding: 20px 15px 15px 15px;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.margin-bottom-0{
    margin-bottom: 0;
}
.table-border th{
    border: 2px solid #ddd;
    font-weight: bold;
}
.table-border td{
    border: 1px solid #ddd;
}
.input-field>label{
    color: #000;
    font-weight: bold;
}
.pointer{
    cursor: pointer;
}

/*  */
#nav-mobile>li>ul>li>a{
    background-color: #ddd;
}

#nav-mobile>li>ul>li ul>li>a{
    background-color: #fff;
    margin-left: 16px;
}

.activeLink{
    background-color: #ffdddd;
}


.SearchArea{
    border: 1px #999 solid;
    box-shadow: 0 0 16px rgba(152, 151, 220, 0.62);
    padding: 16px;
    margin: 12px 0 0 0;
}
table>.SearchTable{
    /*width: 100%;*/
}
table.SearchTable tr{
    /*border: none;*/
}
table.SearchTable td,table.SearchTable th{
    padding: 4px 6px;
}
table.SearchTable label{
    width: 100%;
}
label>input.inputStyle, label>select.inputStyle {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background: none #fff;
    /*background-color: #fff;*/
    /*background-image: none;*/
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#idTotalNumber, .TotalNumber{
    position: absolute;
    width: 150px;
    height: 44px;
    background-color: #6564D8;
    font-size: 24px;
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    text-align: right;
    right: 16px;
    top: 90px;
}
.PageControl{
    text-align: center;
    margin-top: 16px;
}
/*頁碼*/
.pageNum{
    list-style: none;
    display: flex;
}
.pageNum>.active>a,
.pageNum>.active>span,
.pageNum>.active>a:hover,
.pageNum>.active>span:hover,
.pageNum>.active>a:focus,
.pageNum>.active>span:focus{
    background-color: #377311;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
}
.pageNum>li>a, .pageNum>li>span {
    background-color: #ccc;
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
}
.pageNum>li>a:hover,
.pageNum>li>span:hover,
.pageNum>li>a:focus,
.pageNum>li>span:focus {
    background-color: #baf79a;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
}

.action-line{
    margin: 8px;
}
.action-line>li{
    float: left;
    margin-right: 16px;
}
li.nav-item>.nav-link.active, li.nav-item>.nav-link.active i{
    color: #fff;
    font-weight: bold;
}
.AreaBoxHeader{
    background-color: #fff;
    position: relative;
    top: 20px;
    display: inline-block;
    padding: 8px 16px;
    /*border: 1px solid #999;*/
    left: 16px;
}
.AreaBoxBody{
    border: 1px solid #999;
    padding: 32px 16px;
}
.form-control.view{
    background-color: rgba(255, 255, 255, 0);
    border: none;
}
.form-group>label{
    font-weight: bold;
}
.subOverlay{
    background-color: #000;
}
.alignRight{
    text-align: right;
}
.alignCenter{
    text-align: center;
}
.tableResponse>thead>tr>th{
    min-width: 100px;
}
/*
 CSS for the main interaction
*/
.tabSet > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabSet .tab-panel {
    display: none;
}

.tabSet > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabSet > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabSet > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabSet > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabSet > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabSet > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}
/*
 Styling
*/
.tabSet > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0;
}

.tabSet > label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
}

.tabSet > label:hover,
.tabSet > input:focus + label {
    color: #06c;
}

.tabSet > label:hover::after,
.tabSet > input:focus + label::after,
.tabSet > input:checked + label::after {
    background: #06c;
}

/* tab checked */
.tabSet > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
}
.helpBox{
    background: #fcfdce;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #c3c39d;
}
.padding-8-16{
    padding: 8px 16px;
}
/* modal */
@media (max-width: 576px) {
    .modal500{
        width: 340px;
    }
}
@media (min-width: 576px) {
    .modal500{
        width: 500px;
    }
}
.jBox-content{
    overflow: auto;
}
.bigRadio, .bigCheckbox{
    width: 18px;
    height: 18px;
    /*vertical-align: middle;*/
    vertical-align: sub;
    margin: 0 4px;
}
/*  */
i.Y{
    display: inline-block;
    padding: 1px 7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #9acc89;
    margin-right: 4px;
    font-style: normal;
}
i.N{
    display: inline-block;
    padding: 1px 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f1a2ae;
    margin-right: 4px;
    font-style: normal;
}
/*  */
.reportItem{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ddd;
    margin: 4px 8px;
    border-radius: 8px;
    width: auto !important;
}
.reportItem>input{

}
.mouseClick{
    color: #00f !important;
    cursor: pointer;
}
.mouseClick:hover{
    text-decoration: underline;
    font-weight: bold;
}
.sidebar-dark  div.sidebar-heading{
    color: #bf2e2e;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    margin: 0 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.servicePackageBox{
    border: 1px solid #aaa;
}
.dockTitle{
    color: #c42e2e;
    font-size: 1.4rem;
    margin: 8px 0;
}

fieldset {
     border: 2px solid #ddd;
     padding: 10px;
     text-align: left;
     margin-bottom: 16px;
 }
legend {
    padding: 0 6px;
    font-weight: bold;
    width: auto;
    margin-bottom: 0;
}
.projectName {
    margin-top: 12px;
    margin-bottom: 6px;
    white-space: nowrap;
    color: rgb(51, 51, 51);
    font-weight: bold;
}
#modalMeterList>.projectName{
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    padding: 8px;
    background-color: #f97e3c;
    color: #fff;
    border-radius: 8px;
}
.cursor {
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px solid rgb(136, 136, 136);
    width: 220px;
    text-align: center;
    cursor: pointer;
}
/* ./img/houseneedpwd.png */
.description {
    display: none;
    position: absolute;
    margin-top: 93px;
    margin-left: 85px;
    width: 90px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    background: url('') 0 0 no-repeat;
    color: blue;
}
.MeterBox{
    margin: 16px 0;
    border: 1px solid #ddd;
    padding: 16px;
    background: no-repeat 50% 50%;
    background-size: cover;
    /*background-repeat: no-repeat;*/
    /*background-position: 50% 50%;*/
}
.TitleValue{
    font-weight: bold;
    font-size: 22px;
}
.deviceName{
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.8);
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item{
    word-wrap: break-word;
    white-space: pre-wrap;
}
#showTable{
    margin-top: 16px;
}
.parent.odd,.parent.even{
    background-color: #d7dad7;
}