body {
    min-height:100vh;
    position: relative;
    margin: 0;
    padding: 0;
}
footer {
    position:absolute !important;
}
/* 使用::before伪元素来设置背景图片和透明度 */
#bodyNoMenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/backgroup.png'); /* 替换为你的背景图片路径 */
    background-size: cover; /* 根据需要调整背景图片大小 */
    background-position: center; /* 根据需要调整背景图片位置 */
    opacity: 0.5; /* 设置透明度为50%，可以根据需要调整 */
    z-index: -1; /* 确保伪元素位于body内容的下方 */
}
.element-hide {
    display:none;
}
.mouse-handle {
    cursor:pointer;
}
.sidebar {
    z-index:10 !important;
}
.required {
    color:#ff0000;
}
input.required {
    color:#000000;
}
input.text-inline {
    border: 1px solid #e9ecef;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem;
}
input.text-inline:disabled {
    background-color: #e9ecef;
}
select.attribute-changed,
textarea.attribute-changed,
input.attribute-changed {
    border: solid 1px #ff0000;
}
.btn-upload,
.btn-upload:hover {
    background-color: #257608;
    border-color: #257608;
}
.btn-export,
.btn-export:hover {
    background-color: #0D3767;
    border-color: #0D3767;
}

.loadmask {
    z-index:20000 !important;
}
.loadmask-msg {
    z-index: 20001 !important;
}
.row-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.project-summary-card .text-bg-danger,
.project-summary-card .text-bg-warning {
    color: #fff !important;
}
.project-summary-card .text-bg-danger .huge,
.project-summary-card .text-bg-warning .huge{
    padding: 20px 0px;
    font-size: 2.25rem;
}
/*=======弹出窗口重写样式====================*/
.gj-modal {
    z-index: 9999 !important;
}
.gj-dialog-md-header {
    padding: 10px !important;
    border-bottom: solid 1px #c7c7c7;
}
.gj-dialog-md-header .close{
    position: absolute;
    right: 10px;
    top: 0px;
}
.gj-dialog-md-body {
    padding: 10px !important;
}
.gj-dialog-md-footer {
    background-color: #fff;
    flex-direction: row !important;
}
.gj-dialog-md-footer .btn{
    margin-right:0px;
    margin-left:10px;
}

/*=====Login Page=======*/
.btn-block-49 {
    width: 45%;
    margin-left: 4%;
}
.btn-block-98 {
    width: 98%;
    margin-left: 1%;
}
.btn-block-100 {
    width: 100%;
}
.w-98 {
    width: 98%;
}
.w-85 {
    width: 85%;
}
.wpx-60 {
    width:60px;
}
.padding-bottom-80 {
    padding-bottom:80px;
}
.register-notification {
    color: #000;
    padding-top: 10px;
}
.block-border {
    border: solid 1px #dfe2e6;
    padding: 5px 10px;
    border-radius: 5px;
}
/*============================Dashboard======================*/
.dashboard-total .card-header {
    border-bottom-color:#ffffff;
    color:#ffffff;
}
.dashboard-number-count {
    text-align: center;
    font-size: 2em;
    margin: 30px 0px;
    color: #ffffff;
}
.dashboard-chart {
    min-height:600px
}
#chartOther,
#chartProject {
    min-height: 600px;
    width: 100%;
}
#chartByStatus, #chartDistrict {
    min-height: 200px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
/**===========Project=============*/
#blockFilter .input-group {
    margin-bottom: 10px;
}
#blockLegend .row {
    display:none;
}
.project-search-label {
    width: 170px;
}
.block-map-legend {
    position: absolute;
    min-width:100px;
}
.block-project-files {
    max-height:400px;
    overflow:auto;
}
#blockStatusLog .toast {
    width:100%;
}
input.not-auto-save {
    background-color: #e9ecef;
}
/* 固定表头 */
.table-fixed {
    width: 100%;
}

.table-fixed thead {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.esri-attribution__sources {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 0;
    align-self: flex-start;
    padding: 0 5px;
    font-weight: 300;
    overflow: hidden;
    background-color: transparent;
    font-size: 12px;
    font-family: sans-serif;
    color: black;
    position: absolute;
    right: 50px;
    bottom: 15px;
}
.copyright-url {
    padding: 0 4px;
    font-family: sans-serif;
    font-size: 12px;
    color:#000000;
}
.copyright-logo {
    width: 28px;
    height: 28px;
    display: inline-flex;
    background: url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);
    background-size: 28px;
}
/*==========================固定标题与首列===================================*/
.fixed-table-container {
    height: 400px;
    overflow: auto;
    position: relative;
    margin: 20px 0;
}

.fixed-table thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 20;
}

.fixed-table thead tr:nth-child(2) th {
    position: sticky;
    top: 38px; /* 第一行高度 */
    z-index: 20;
}

.fixed-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: white;
}

.fixed-table th:first-child,
.fixed-table td:first-child {
    /*
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
    */
}

/* 固定首列样式 */
.table-fixed-column thead th:first-child,
.table-fixed-column tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
}
/* 首列表头需要更高z-index */
.table-fixed-column thead th:first-child {
    z-index: 3;
}

.block-map-legend h4 {
    margin: 0px;
}

.block-map-legend i.icon-control {
    position: absolute;
    right: 0px;
    cursor: pointer;
    top: 0px;
}
.block-map-legend span.legeng-boundary{
    border-top:solid 4.01px #0414f5;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-buildings{
    border:solid 2.12px #000000;
    width: 20px;
    display: inline-block;
    height: 15px;
}
.block-map-legend span.legeng-podium {
    border:solid 2.12px #f8d547;
    width: 20px;
    display: inline-block;
    height: 15px;
}
.block-map-legend span.legeng-openings {
    border-top:solid 4.76px #e88831;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-canopy {
    border-top:solid 5.52px #75fbfd;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-fw {
    border-top:solid 4.01px #c1ce64;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-fg {
    border-top:solid 5.52px #d033d8;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-fin {
    border-top:solid 4.76px #ea3322;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-nap {
    background-color: #4da935;
    border: solid 1.51px #232323;
    width: 15px;
    display: inline-block;
    height: 15px;
    border-radius: 10px;
}
.block-map-legend span.legeng-nap-el {
    background-color: #e93622;
    border: solid 1.51px #232323;
    width: 15px;
    display: inline-block;
    height: 15px;
    border-radius: 10px;
}
.block-map-legend span.legeng-AA300 {
    border:solid 3.63px #d1352b;
    width: 20px;
    display: inline-block;
    height: 15px;
}
.block-map-legend span.legeng-sb {
    border:solid 0.98px #232323;
    background-color:#a5cefb;
    width: 20px;
    display: inline-block;
    height: 15px;

}
.block-map-legend span.legeng-road {
    border-top:solid 2.49px #468c5e;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-spot-height {
    background-color: #585858;
    border: solid 1.51px #232323;
    width: 15px;
    display: inline-block;
    height: 15px;
    border-radius: 10px;
}
.block-map-legend span.legeng-hked-v-barrier {
    border-top: solid 2.49px #f27dbf;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-hked-c-barrier {
    border-top: solid 2.49px #db1e2a;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-hyd-barrier {
    border-top: solid 2.49px #954aa2;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-hked-enclosure {
    border: solid 0.98px #232323;
    background-color: #c43c39;
    width: 20px;
    display: inline-block;
    height: 15px;
}
.block-map-legend span.legeng-hyd-enclosure {
    border: solid 0.98px #232323;
    background-color: #987db7;
    width: 20px;
    display: inline-block;
    height: 15px;
}
.block-map-legend span.legeng-ab {
    border-top: solid 4.01px #47aeff;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-aw {
    border-top: solid 4.01px #00fb04;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-upsd {
    border-top: solid 4.01px #ac5b31;
    width: 20px;
    display: inline-block;
    height: 7px;
}
.block-map-legend span.legeng-lnrs {
    border-top: solid 4.01px #ffd300;
    width: 20px;
    display: inline-block;
    height: 7px;
}

.label-rotate {
    font-size:1.2rem;
}
.label-rotate-aw {
    color: #00fb04;
}
.label-rotate-ab {
    color: #47aeff;
}
.label-rotate-upsd {
    color: #ac5b31;
}
.label-rotate-fg {
    color: #d033d8;
}

.icon-delete-layer {
    position: absolute;
    right: 50px;
}
.btn-draw-zone, .btn-upload-area, .btn-send-area, .btn-export-area {
    text-align: center;
}
.sidebar-pane {
    padding:10px 5px !important;
}
.col-form-label {
    color: #000;
}
.btn-upload-area > a,
.btn-upload-area > span {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #257608;
    color: #fff;
    border-radius: 10px;
}
.btn-draw-zone > a,
.btn-draw-zone > span {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #0d3767;
    color: #fff;
    border-radius: 10px;
    min-width: 115px;
}
.btn-send-area > a,
.btn-send-area > span {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #fd7e14;
    color: #fff;
    border-radius: 10px;
    min-width:160px;
}
.btn-export-area > a,
.btn-export-area > span {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #0D3767;
    color: #fff;
    border-radius: 10px;
}

.result-tab-nmdesign-title {
    background-color: lightgray;
}

.table-no-padding > :not(caption) > * > * {
    padding:0px;
}
.table-no-padding {
    text-align:center;
}
#tabExtLimit th.type-pd {
    background-color: #bfbfbf;
}
#tabExtLimit th.type-refcase {
    background-color: #febf00;
}
.tab-napinfo-data th {
    min-width: 60px;
}
.nap-exceedance {
    color: #ff0000;
}
.pdrefcase-1 {
    color: #800080;
}
.pdrefcase-2 {
    color: #0000ff;
}
.pdrefcase-3 {
    color: #000000;
}
.pdrefcase-4 {
    color: #000000;
}
.pdrefcase-legend {
    text-align:center;
}
.pdrefcase-legend .col{
    padding:0px;
}
.pdrefcase-awtht,
.pdrefcase-awbt {
    color: #000000;
    background-color: #00fb04;
    display: inline-block;
    width: 100%;
}
.pdrefcase-ab,
.pdrefcase-eab {
    color: #000000;
    background-color: #47aeff;
    display: inline-block;
    width: 100%;
}
.pdrefcase-fg {
    color: #000000;
    background-color: #d033d8;
    display: inline-block;
    width: 100%;
}
.pdrefcase-upsd {
    color: #000000;
    background-color: #ac5b31;
    display: inline-block;
    width: 100%;
}

.nap-label {
    color:#ff0000;
}
#tabNAP thead th {
    min-width: 120px;
}
#tabRefCase thead th {
    min-width: 120px;
}
.tab-napinfo-summary th {
    width:200px;
}
.ui-datepicker {
    z-index: 10000 !important; 
}
.saf-header {
    background-color: #b2b2b2 !important;
}
.block-signature {
    height:60px;    
}
.image-signed {
    width: 200px;
    height: 50px;
}
.a4-portrait {
    width: 210mm;
    height: 297mm;  /*1.4141*/
    border: 1px solid #000; /* 可选，用于显示边框 */
    /*margin: 0 auto;  可选，用于居中显示 */
}
.a4-landscape {
    width: calc(100vw - 440px); /*297mm*/
    height: calc(100vh - 170px); /*210mm*/
    border: 0px solid #000; /* 可选，用于显示边框 */
    /*margin: 0 auto;  可选，用于居中显示 */
}
/*.a4-landscape {
    width: 297mm;
    height: 210mm;
    box-sizing: border-box;
}*/
.a3-portrait {
    width: 297mm;
    height: 420mm;
    border: 0px solid #000; /* 可选，用于显示边框 */
    /*margin: 0 auto;  可选，用于居中显示 */
}
/*.a3-landscape {
    width: calc(100vw - 440px);*/ /*420mm*/
    /*height: calc(100vw - 170px);*/ /*297mm*/
    /*border: 0px solid #000;*/ /* 可选，用于显示边框 */
    /*margin: 0 auto;  可选，用于居中显示 */
/*}*/
.a3-landscape {
    width: 420mm;
    height: 297mm;
    box-sizing: border-box;
}
.a4-portrait .block-map-legend,
.a4-landscape .block-map-legend,
.a3-portrait .block-map-legend,
.a3-landscape .block-map-legend {
    top:0px !important;
    right:0px !important;
}
.fancybox-title-inside-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 16px;
}

.fancybox-title-text {
    flex: 1;
}

.fancybox-title-inside-wrap i{
    cursor: pointer;
    color: #fff;
}

#floating-panel {
    position: fixed;
    bottom: 92px;
    left: 470px;
    width: calc(100vw - 480px);
    height: 200px;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    transition: height 0.3s;
}

#floating-panel div.card-body {
    overflow: auto;
    padding: 0px;
}
#floating-panel div.card-body tbody tr{
    cursor:pointer;
    line-height:15px;
}

#floating-panel table tbody tr.selected td{
    background-color:#83ddcc;
}
#myTabAttribute li button {
    line-height:15px;
}
/*#toggle-button {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}
*/
.attributetable-switch {
    width: 63px;
    height: 17px;
    left: 0;
    right: 0;
    top: -17px;
    margin: auto;
    position: absolute;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #519E72;
    background-image: linear-gradient(0deg, #108191 0%, #519E72 100%);
    border: 2px solid rgba(255,255,255,0.8);
    border-bottom-style: none;
    z-index: 2147483647;
}

.attributetable-switch.open {
    background-image: url(images/arrow_down.svg);
    /*border: none;*/
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.attributetable-switch.open:hover {
    background-image: url(images/arrow_down_hover.svg);
}

.attributetable-switch.close {
    background-image: url(images/arrow_up.svg)
}

.attributetable-switch.close:hover {
    background-image: url(images/arrow_up_hover.svg);
}
#floating-panel .ul-attribute-tools {
    list-style:none;
    margin:0px;
    padding:0px;
}
#floating-panel .ul-attribute-tools li{
    float:left;
    margin-right: 10px;
}
#floating-panel .ul-attribute-tools li i{
    cursor:pointer;
}



@media (max-width: 1200px) {
    #floating-panel {
        width: calc(100vw - 420px);
        left: 400px;
    }
}
@media (max-width: 990px) {
    #floating-panel {
        width: calc(100vw - 340px);
        left: 315px;
    }
}
@media (min-width: 768px) {
    .sidebar {
        top: 0px !important;
        bottom: 0px !important;
    }
}