/*儀錶板*/
iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.framewinArea {
  position: relative;
  margin-top: 70px;
  width: calc(100% - 240px);
  height: calc(100% - 70px);
  margin-left: 240px;
  transition: all 0.3s;
  background: #f6f8fc;
  overflow-y: hidden;
}

.framewinArea.full {
  width: calc(100% - 0px);
  height: calc(100% - 70px);
  margin-left: 0px;
}

@media (max-width: 1024px) {
  .framewinArea {
    position: relative;
    margin-top: 70px;
    width: calc(100% - 0px);
    height: calc(100% - 70px);
    margin-left: 0px;
    transition: all 0.3s;
    background: #f6f8fc;
    overflow-y: hidden;
  }
}

/*bootstrap modal-fade滑出套件 - 粉綠色*/
.greenModal .modal-header {
  color: #fff;
  background-color: #59ba89;
}

.greenModal .modal-header h5 {
  font-size: 1.125rem;
}

.greenModal .btn-close {
  color: #fff;
  background: none;
  line-height: 1em;
}
/*bootstrap modal-fade滑出套件 - 邊頭無底色*/
.normalModal .modal-header {
  color: #000000;
  border-bottom: 2px solid #64697e;
  background-color: #ffffff;
  text-align: center;
}

.normalModal .modal-header h5 {
  font-size: 1.125rem;
  color: #64697e;
}

.normalModal .btn-close {
  color: #000000;
  background: none;
  line-height: 1em;
}

/*ul樣式*/
.decimalUl {
  list-style-type: decimal;
  margin: 0 20px;
}

/*.disc 實心圓形符號*/
.discUl {
  list-style-type: disc;
  margin: 0 20px;
}

.iconUl {
  list-style: none;
  padding: 0;
}

.iconUl li {
  padding-left: 1.3em;
}

.iconUl li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
/*offcanvas畫布*/
.offcanvas-header {
  background: #00000020;
}

.offcanvasTitle {
  display: flex;
  align-items: center;
  /* font-size: 1.375rem; */
  color: #64697e;
  font-weight: bold;
}

.offcanvasTitle i {
  margin-right: 10px;
  /* font-size: 1rem; */
}

.offcanvas-header .btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  /* background-size: 1.2rem; */
  padding: 0.25em 0.25em;
}

.offcanvasLinkGroup {
  display: flex;
  flex-direction: column;
  padding: 0 1.2rem 0 1.1rem;
}

.offcanvasLink {
  padding: 10px 16px;
  /* font-size: 1.7rem; */
  color: #323c54;
  border-bottom: 1px solid #323c5410;
}

.offcanvasLink:hover {
  background: #00000010;
}

/*搜尋bar滿版*/
.searchAreaInline {
  width: 100%;
  padding: 0rem 1rem;
  background: #fafafb;
  transition: all 0.3s;
}

.searchAreaInline .searchTitleGroup {
  padding: 0.5rem 1rem;
  min-height: auto;
}

.searchAreaInline .searchItem {
  background: var(--fit-white);
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--fit-black-light);
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.searchAreaInline .employeeItem {
  padding: 0px 10px;
  margin: 0 10px;
  border-radius: 10px;
  background: url(../imagesBackend/bg_EmployeeProfile.jpg) no-repeat;
  background-size: cover;
}

.searchAreaInline .search-inline {
  padding: 1rem 0px;
}

.searchIfnoItem {
  line-height: 1.2;
  padding: 0px 10px 2px 10px;
  color: #01575c;
}

.searchIfnoItem .tipGroup {
  margin-bottom: 6px;
  line-height: 1;
  font-size: 1.2rem;
  color: #5a6171;
}

.searchIfnoItem .tipGroup span {
  line-height: 1;
  margin-right: 4px;
}

.searchIfnoItem .tipGroup span i {
  margin-right: 4px;
}

.open-pageInfoGroup {
  position: absolute;
  right: 10px;
  top: 10px;
}

@media (max-width: 576px) {
  .searchAreaInline .searchItem {
    position: fixed;
    bottom: -100%;
    left: 0;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    z-index: 99992;
    height: 500px;
    padding: 0.5rem;
    /* overflow-y: scroll; */
    box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
  }

  .searchAreaInline .searchItem .searchContent {
    overflow-y: auto;
    overflow-x: hidden;
    height: 90%;
  }

  .searchAreaInline .searchItem.open {
    bottom: 0px;
  }
}

/*麵包屑*/
.breadcrumb {
  padding: 4px 15px 0 15px;
  margin-bottom: 0;
  list-style: none;
  background-color: #ffffff;
  border-radius: 0;
  color: var(--wdaets-blue);
  font-weight: bold;
  font-size: 1rem;
}

.breadcrumb-item.active {
  color: #000000;
}

.breadcrumb a {
  color: var(--wdaets-blue);
  font-weight: bold;
}

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: var(--wdaets-blue);
  content: "/\00a0";
}

.bookmarkIcon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--wdaets-blue);
  border: 1px solid var(--wdaets-blue);
  border-radius: var(--bs-border-radius-pill);
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  margin-right: 0.5rem;
}

/*單元標題-主標題樣式*/
.unitTitle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 1.875rem;
  color: var(--wdaets-blue);
  font-weight: bold;
}

.unitTitle .btn-bookmark.active {
  background: #ffffff;
  border: 1px solid var(--wdaets-blue);
}

.unitTitle .btn-bookmark .bi-bookmark-heart-fill {
  display: none;
}

.unitTitle .btn-bookmark.active .bi-bookmark-heart-fill {
  display: block;
}

.unitTitle .btn-bookmark.active .bi-bookmark-heart {
  display: none;
}

.searchTitleGroup .dataTotal {
  display: inline-flex;
  padding: 0;
  font-size: 0.875rem;
  color: #000;
}

/*內標題樣式-標頭有雙層色塊*/
.fileTitle-icon {
  position: relative;
  padding: 0.2rem 0.5rem 0.2rem 2.5rem;
  margin-bottom: 1rem;
  color: #5a6171;
  font-size: 1.375rem;
  font-weight: bold;
  border-bottom: 1px solid #5a617150;
}

.fileTitle-icon::before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #9da5b8;
}

.fileTitle-icon::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 20px;
  height: 100%;
  background: #9da5b850;
}

.fileTitle-line {
  position: relative;
  padding: 0.2rem 0.5rem 0.2rem 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  color: var(--fit-dark);
  font-size: 1.375rem;
  font-weight: bold;
}

.fileTitle-line::before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 0.5%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 50%;
  background: var(--wdaets-green);
  border-radius: var(--bs-border-radius-lg);
}

.fileTitle-bold {
  position: relative;
  padding: 0.2rem 0.5rem 0.2rem 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  color: var(--fit-black-dark);
  font-size: 1.2rem;
  font-weight: bold;
}

/*按鈕*/

.btn-icon-white-o {
  display: flex;
  width: 33px;
  height: 33px;
  font-size: 1rem;
  color: #212529;
  background: #fff;
  box-shadow: 1px 3px 6px rgb(0 0 0 / 30%);
  border-radius: 50%;
}

.btn-icon-white-o:hover {
  color: #212529;
  background: #f5f5f5;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 1.2;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #b4b3b3;
  border-radius: 4px;
  text-align: center;
  color: #b2b2b2;
  font-size: 0.875rem;
}

.searchBtnGroup {
  display: flex;
  align-items: flex-end;
}

.searchBtnGroup a,
.searchBtnGroup button {
  margin: 0 2px;
}

.endBtnGroup {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.endBtnGroup a {
  align-items: center;
  padding: 10px 20px;
  margin: 0 2px;
  font-size: 1rem;
  margin: 0 1px;
}
/* 頁碼 */
.paginationGroup {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.paginationGroup .page-item.active .page-link {
  z-index: 3;
  color: #01575c;
  background-color: #01575c30;
  border-color: #01575c30;
}

.paginationGroup .page-link {
  position: relative;
  display: block;
  padding: 2px 12px;
  color: #01575c;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.paginationGroup .page-link.normal {
  position: relative;
  display: block;
  padding: 2px 2px;
  color: #01575c;
  text-decoration: none;
  background-color: rgb(0 0 0 / 0%);
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.paginationGroup .page-link:hover {
  background-color: #01575c30;
  border-color: #01575c30;
}

.pagination .page-item {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0 6px;
}

.selectNumberGroup {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 6px;
}

.selectNumberGroup input {
  display: inline-flex;
  width: 40px;
  height: 32px;
  padding: 0px 12px;
  margin: 0 2px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.4rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (max-width: 576px) {
  .pagination .showPage {
    display: none;
  }
}

/*身分切換*/
.changeUserItem {
}

.changeUser {
  display: block;
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #58748e50;
  border-radius: 8px;
}

.changeUser .name {
  line-height: 1;
  color: #58748e;
  font-weight: bold;
}

.changeUser:hover {
  background: #00000010;
}

/* version1 版本1的內容-上下欄 */
.version1 {
  display: flex;
  flex-direction: column;
  /* min-height: 600px; */
  padding: 1rem 1rem;
}

.version {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem;
}

.version-fancybox {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem;
}

.version-map {
  position: relative;
  width: 100%;
}

/* version2 版本2-應變小組雙欄 */
.version2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding: 1rem 1rem;
}

.mainContent {
  display: flex;
  flex: 0 0 93%;
}

.mainContent ~ .btnGroup {
  display: flex;
  flex: 0 0 5%;
}

.mainContent.noScroll {
  overflow: hidden;
}

.main {
  padding: 1rem 1rem;
  background: #fff;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0 10px rgb(0 0 0 / 2%);
}

.open-searchItem,
.close-searchItem {
  display: none;
}

@media (max-width: 576px) {
  .selectNumberGroup {
    display: none;
  }

  .searchAreaInline .searchTitleGroup {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 5px 5px;
  }

  .open-searchItem {
    display: inline-flex;
    margin-left: 1rem;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
  }

  .close-searchItem {
    display: inline-block;
  }

  .version1,
  .version {
    padding: 5px;
  }
}

/*雙欄應用*/
.infoColumns {
  background: #ffffff;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0 10px rgb(0 0 0 / 2%);
  padding: 10px;
  height: 50vh;
}

.infoColTitle1 {
  padding: 10px;
  color: #fff;
  font-size: 2.6rem;
  text-align: center;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4848a5+0,9697cc+100 */
  background: #4848a5; /* Old browsers */
  background: -moz-linear-gradient(
    left,
    #4848a5 0%,
    #9697cc 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    #4848a5 0%,
    #9697cc 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    #4848a5 0%,
    #9697cc 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4848a5', endColorstr='#9697cc',GradientType=1 ); /* IE6-9 */
}

.infoColTitle2 {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 1.25rem;
  background: #e9ecf1;
}

.infoColTitle2 .name {
  margin-left: 6px;
  font-weight: bold;
}

.radioSettingGroup {
  text-align: center;
  margin-bottom: 10px;
}

.radioSettingGroup:first-child .form-check-Group {
  border-right: 1px solid #e9ecf1;
}

.centerTitle {
  padding: 0px 0 6px 0;
  color: #484aa3;
  font-size: 1.25rem;
}

.radioSettingGroup {
  padding: 0;
}

.form-check-Group {
  padding: 10px;
  border-bottom: 1px solid #e9ecf1;
  border-top: 1px solid #e9ecf1;
}

.form-title {
  color: #484aa3;
  font-size: 1rem;
  line-height: 1;
  text-align: right;
}

.form-title .titleTip {
  display: block;
  color: #212529;
  font-size: 0.875rem;
  line-height: 1.1;
}

.faxCheckGroup {
  max-height: 300px;
  overflow-y: scroll;
}

@media (max-width: 768px) {
  .form-title {
    text-align: left;
  }
}

@media (max-width: 1024px) {
  .faxCheckGroup {
    max-height: 150px;
  }
}

.noScrollColumns {
  flex: 1;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(0 0 0 / 2%);
}

.scrollColumns {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

.infoCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.infoCard .cardTitle {
  padding: 6px 0;
  color: #fff;
  font-size: 1.25rem;
  text-align: center;
  background: #888888;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.cardTitle.red {
  background: #eb6260;
}

.cardTitle.yellow {
  background: #e9c71c;
  color: #212529;
}

.infoCard .content {
  flex: 1;
  padding: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}

.disasterName {
  color: #484aa3;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}

.disasterName span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #ffffff;
  background: #fd7077;
}

.disasterInfoGroup > .col {
  border-right: 1px solid #e9ecf1;
}

.disasterInfoGroup > .col:last-child {
  border-right: 0;
}

.disasterInfoItem {
  margin-bottom: 6px;
  font-weight: bold;
}

.disasterInfoItem .title {
  font-size: 0.875rem;
  color: #202020;
}

.disasterInfoItem .text {
  line-height: 1;
  font-size: 1.7rem;
  color: #484aa3;
}

.infoCard .form-check-Group {
  min-height: 180px;
  padding: 0 10px;
  border: 0;
}

.infoCard .form-check-Group .form-check {
  border-bottom: 1px dashed #a0a0a0;
}

.infoCard .form-check-Group label {
  line-height: 1.2;
}

.alertCardGroup {
  display: flex;
  margin: 10px 0;
}

.alertCardItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.alertCardItem:first-child {
  border-right: 1px solid #e9ecf1;
}

.cityNumberGroup {
  display: flex;
}

.alertCardItem .text {
  line-height: 1.1;
  margin: 6px 0;
  text-align: center;
  font-size: 1rem;
  color: #202020;
  font-weight: bold;
}

.cityBlack .text {
  font-size: 0.875rem;
}

.alertCardItem .number {
  font-size: 1.2rem;
  line-height: 1;
}

.alertCardItem .number span {
  font-size: 4.6rem;
  font-weight: bold;
}

.alertCardGroup.red .number span {
  color: #eb6260;
}

.alertCardGroup.yellow .number span {
  color: #e9c71c;
}

.cityBlack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cityNumberGroup .total {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.125rem;
  font-weight: bold;
}

.alertCardGroup.red .cityNumberGroup .total {
  background: #eb626030;
}

.alertCardGroup.yellow .cityNumberGroup .total {
  background: #e9c71c30;
}

.downloadGroup .btnGroup {
  display: flex;
  flex-direction: column;
}

.downloadGroup .number {
  text-align: center;
  font-size: 1rem;
  line-height: 1.1;
}

.downloadGroup .number span {
  font-size: 4.6rem;
}

.downloadGroup .text {
  line-height: 1.1;
  text-align: center;
}

.downloadGroup .icon {
  line-height: 1.2;
  text-align: center;
}

.downloadGroup .icon i {
  font-size: 4rem;
}

.abgne_tab {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.abgne_tab .TBtabs {
  display: flex;
}

.abgne_tab .TBtabs > li {
  flex: 1;
  color: #fff;
  background-color: #888888;
  border-right: 1px solid #323c5450;
  transition: all 0.3s;
}

.abgne_tab .TBtabs > li:last-child {
  border-right: 0;
}

.abgne_tab .TBtabs > li a {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  height: 100%;
  padding: 6px 0px;
  font-size: 1.125rem;
  color: #fff;
}

.abgne_tab .btn-tab:hover {
  background-color: #5a617180;
  border-color: #5a617180;
}

.abgne_tab .btn-tab.active {
  background-color: #5a6171;
  border-color: #5a6171;
}

.abgne_tab .btn-tab.active a {
  color: #fff;
  font-weight: bold;
}

.formInfoContent {
  /* padding: 0 10px; */
  overflow: hidden;
}

.formInfoContent .tab_content {
  position: relative;
  height: 100%;
  padding: 0 10px;
  overflow-y: auto;
}

.tab_content .btnAdd {
  margin: 10px 0px;
}
/*輪值應變小組*/
.TBstyleGroup {
  padding: 10px 0;
}

.TBstyle {
  border: 1px solid #82889a;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #ffffff;
}

.TBstyle .titleGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #d8dfe920;
  border-bottom: 1px solid #82889a;
}

.TBstyle .titleItem {
  color: #333474;
  font-size: 1rem;
}

.TBstyle .titleGroup .btnGroup {
  margin: 0;
}

.TBstyle .titleGroup .btnGroup a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.TBstyle .content {
  padding: 0 10px;
}

.TBCol .text {
  font-size: 0.875rem;
  line-height: 1.2;
  color: #888888;
}

.TBCol .name {
  font-size: 1rem;
  line-height: 1.2;
  color: #5a6171;
  font-weight: bold;
}

.TBstyle .content {
  display: flex;
  flex-wrap: wrap;
}

.TBstyle .TBCol {
  flex: 1 0 0;
  padding: 10px 0;
}

.TBCol .btn-text {
  color: #202020;
}

/*查報單開關列*/
.functionalListGroup {
  border: 1px solid #82889a;
  border-radius: 12px 12px;
  /* overflow: hidden; */
  margin-bottom: 10px;
}

.functionalList {
  display: flex;
}

.functionalListTitle {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  /* border-radius: 0 12px 0 0; */
}

.functionalList > *:first-child {
  border-top-left-radius: 12px;
}

.functionalList > *:last-child {
  border-top-right-radius: 12px;
}

.detailed-close .functionalList .switchBtn {
  border-radius: 10px 0 0 10px;
}

.detailed-close .functionalListTitle {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 0 12px 12px 0;
}

.switchBtn {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #82889a;
}

.switchBtn:hover {
  background: #5a6171;
}

.switchBtn a,
.switchBtn span {
  padding: 0 2px;
  color: #fff;
}

.functionalListTitle .titleInfo {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
}

.functionalListTitle .titleInfo span {
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
}

.functionalListTitle .titleInfo > span::after {
  content: "　";
  position: absolute;
  top: 50%;
  left: 98%;
  transform: translate(-50%, -50%);
  display: block;
  background: #ffffff;
  width: 1px;
  height: 14px;
}

.searchIfnoItem .tipGroup i::before {
  border: 1px solid #ffffff80;
  box-shadow: 0 0 6px rgb(0 0 0 / 30%);
}

.importantIcon i::before {
  border: 1px solid #fff;
  color: #bf0000;
  box-shadow: 0 0 6px rgb(0 0 0 / 30%);
}

/*查報單-雙欄*/
.colTBstyle {
  border-top: 0px solid #82889a;
  padding: 0 10px;
}

.colTBstyle .row:last-child {
  border-bottom: 0;
}

.colTBstyle .row > div {
}

.colTBstyle .th {
  padding: 6px 10px;
  line-height: 1.2;
  text-align: right;
}

.colTBstyle .td {
  padding: 6px 10px;
  line-height: 1.2;
  color: #484aa3;
}

.functionalListGroup .switchBtn .icon_disasterTR {
  display: none;
}

.functionalListGroup .switchBtn .close-disasterTR {
  display: block;
}

.functionalListGroup.detailed-close .switchBtn .open-disasterTR {
  display: block;
}

.functionalListGroup.detailed-close .switchBtn .close-disasterTR {
  display: none;
}

.functionalListGroup .detailed {
  display: block;
}

.functionalListGroup .detailed .item {
  padding: 10px;
  margin-bottom: 10px;
  background: #eeeeee;
}

.functionalListGroup .detailed .item .row > div {
  border-bottom: 0;
}

.functionalListGroup.detailed-close .detailed {
  display: none;
}

@media (max-width: 1360px) {
  .colTBstyle {
    padding: 0 10px;
  }
}
/*查報單-表格式預覽*/

.fileTBstyle .fileNumber {
  padding: 6px 10px;
}

.fileTBstyle .title {
  padding: 4px 0;
  border-top: 1px solid #82889a;
  border-bottom: 1px solid #82889a;
  background: #d8dfe924;
  text-align: center;
  font-size: 1.125rem;
}

.fileTBstyle .tr {
  display: flex;
  padding: 0 0;
  border-top: 1px solid #82889a40;
  border-bottom: 1px solid #82889a40;
}

.fileTBstyle .tr .number {
  flex: 0 0 40px;
  text-align: center;
  background: #d8dfe950;
}

.fileTBstyle .tr .text {
  flex: 1;
  padding: 0 10px;
}

.underline {
  text-decoration: underline;
}

@media (max-width: 1360px) {
  .TBstyle .TBCol {
    flex: 20% 0 0;
  }

  .functionalListTitle {
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
  }

  .functionalListTitle .titleInfo {
    align-self: auto;
    margin-bottom: 6px;
  }

  .functionalBtnGroup a {
    margin-bottom: 6px;
  }
}

@media (max-width: 768px) {
  .scrollColumns {
    height: auto;
    overflow-y: inherit;
  }

  .TBstyle .TBCol {
    flex: 33% 0 0;
  }

  .colTBstyle .th {
    text-align: left;
  }
}

@media (max-width: 575px) {
  .colTBstyle .row > div.th {
    /* border-bottom: 0; */
  }
}

/*綜合查詢-詳細資料Bar*/
.profilePhotoGroup {
  position: relative;
  width: 170px;
  padding: 10px 10px;
}

.profilePhoto {
  width: 150px;
  height: 150px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 50% 50%;
  overflow: hidden;
}

.profilePhoto img {
  width: 150px;
  height: auto;
}

.profilePhotoGroup .btn-upload {
  width: 40px;
  height: 40px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 50% 50%;
  text-align: center;
}

.profilePhotoGroup .btn-upload {
  z-index: 2;
  position: absolute;
  right: 0px;
  bottom: 10px;
}

.profilePhotoGroup .btn-upload i {
  font-size: 1.25rem;
}

.employeeName {
  padding: 6px 0;
  margin-bottom: 10px;
  line-height: 1;
  font-size: 3.125rem;
  color: #fff;
}

.employeeInfoGroup {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.employeeDetailsGroup div {
  text-align: center;
}

.employeeDetailsGroup .item {
  padding-right: 20px;
  margin-right: 10px;
  border-right: 1px solid #ffffff;
}

.employeeDetailsGroup .item:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.employeeDetailsGroup .name {
  padding-bottom: 10px;
  line-height: 1;
  font-size: 1.125rem;
  color: #ffffff;
}

.employeeDetailsGroup .total {
  padding: 0px 0;
  line-height: 1;
  font-size: 1.375rem;
  color: #ffed00;
}

@media (max-width: 577px) {
  .employeeDetailsGroup .item {
    padding-right: 0px;
    margin-right: 2px;
    margin-bottom: 10px;
    border-right: 0px solid #ffffff;
  }
}

/*頁籤樣式*/
.quickMenuBox {
  margin-bottom: 20px;
}

.quickMenu {
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 10px;
  text-align: center;
}

.quickMenu > li {
  display: inline-block;
  padding: 6px 20px;
  /* background: #fff; */
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.quickMenu > li:nth-child(2) {
  margin-left: -3px;
}

.quickMenu > li a {
  display: block;
  color: #666666;
  font-size: 1rem;
  font-weight: 900;
}

.quickMenu > li.active {
  border-bottom: 2px solid var(--wdaets-green);
  color: #0071bc;
}

.quickMenu > li.active a {
  color: var(--wdaets-green);
}

.quickMenu > li:hover {
  border-bottom: 2px solid var(--wdaets-green);
}

.quickMenu > li:hover a {
  color: var(--wdaets-green);
}

.quickMenuBox .tab_container {
}

.profileCard {
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}

.cardTitle {
  margin-bottom: 10px;
  font-size: 1.125rem;
  color: #64697e;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

/*Bootstrap 表單複寫*/
.col-form-label {
  font-weight: bold;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef10;
  opacity: 1;
  border: 1px solid #ced4da80;
}

.form-select:disabled {
  background-color: #e9ecef10;
  border: 1px solid #ced4da80;
}

/*Dashboard*/
.grid-stack .btn-Purple-o {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  right: 0;
}

.btnEnableEditGroup {
  display: flex;
  justify-content: flex-end;
}

.btnEnableEditGroup a {
  margin: 0 2px;
}

/*列印雙欄表單*/
.parent-wrap .unitTitle {
  font-size: 3.2rem;
  text-align: center;
}

.parent-wrap .paperTitle {
  font-size: 2.8rem;
  text-align: center;
}

.parent-wrap .dateGroup {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
}
/*列印*/
.print-page {
  overflow: auto;
  height: auto !important;
  padding: 1cm 1cm;
  /* border: 1px solid red; */
}

/*修改開關示範*/
.modifyGroup {
  display: none;
}

/*兩層結構*/
.accordionArea {
  margin: 10px 10px;
  border: 1px solid #cccccc;
  border-radius: 12px;
  overflow: hidden;
}

.accordion--header {
  background: #f2f2f2;
}

.accordion--header .name {
  font-weight: bold;
}

.accordion--header .name .number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
}

.accordion--BtnGroup {
  /* display: flex; */
  /* align-items: center; */
  padding: 10px 10px;
  height: 100%;
}

.accordion--switchBtnGroup {
  height: 100%;
  padding: 10px 0px;
  background: #cccccc;
}

.accordion--switchBtnGroup a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  font-size: 1.25rem;
  color: #000000;
}

.accordionArea .open--accordion {
  display: none;
}

.accordionArea.close .close--accordion {
  display: none;
}

.accordionArea.close .open--accordion {
  display: flex;
}

.accordionArea.close .accordion--body {
  display: none;
}

/*checkGroup-full 按鈕群組 (Button group) 修改*/
.checkGroup-full .btn {
  /* margin: 0; */
  text-align: left;
  border-radius: 0;
  border: 0;
  font-size: 1rem;
}

.checkGroup-full .btn-group-vertical {
  width: 100%;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/*首頁*/
.wrap-dashboard {
  min-height: 100%;
  background-size: contain;
}

.dashboardMapGroup {
  position: relative;
  height: 50vh;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

/*災情看板*/
.redBlue-card.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 10px;
  word-wrap: break-word;
  background-color: #2b2a42;
  background-clip: border-box;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.redBlue-card .card-header:first-child {
  border-radius: 10px 10px 0 0;
}

.redBlue-card .card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  background: #ca4641;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/*地圖上頁籤*/
.MapTabListGroup {
  z-index: 2;
  position: absolute;
  top: 3%;
  left: 1%;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 94%;
  padding: 0px;
  border-radius: 12px;
  overflow: hidden;
}

.MapTabListGroup .tabs {
  flex: 0 0 40px;
  display: flex;
  padding: 0;
  list-style: none;
  text-align: center;
}

.MapTabListGroup .tabs li {
  flex: 1;
  margin: 0;
  padding: 0.5rem 0.4rem;
  font-size: 1rem;
  cursor: pointer;
  color: #ffffff80;
  background: #323c54;
  border-bottom: 3px solid #ffffff00;
  transition: all 0.3s;
}

.MapTabListGroup .tabs li.active {
  color: #fff;
  border-bottom: 3px solid #fbdc61;
}

.MapTabListGroup .tabs li.hover {
  color: #ffffff90;
}

.MapTabListGroup .tab_container {
  width: 100%;
  flex: 1;
  padding: 10px 0;
  background: #323c5495;
}

.MapTabListGroup .tab_content {
  position: relative;
  height: 100%;
}

.MapTabListGroup .tab_content li {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  overflow-y: auto;
}
/*全區頁籤*/
.tabListGroup {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 425px;
  margin-bottom: 20px;
  padding: 0px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(0 0 0 / 14%);
}

.tabListGroup .tabs {
  flex: 0 0 40px;
  display: flex;
  padding: 0;
  list-style: none;
  text-align: center;
  background: #b9e8ea;
}

.tabListGroup .tabs li {
  flex: 1;
  margin: 0;
  padding: 0.5rem 0.4rem;
  font-size: 1.125rem;
  cursor: pointer;
  color: #108d96;
  font-weight: bold;
  background: #b9e8ea;
  border-bottom: 3px solid #ffffff00;
  transition: all 0.3s;
}

.tabListGroup .tabs li.active {
  color: #fff;
  border-bottom: 3px solid #fbdc61;
  background: #7eaeb1;
}

.tabListGroup .tabs li:hover {
  background: #87bcbf90;
}

.tabListGroup .tab_container {
  width: 100%;
  flex: 1;
  padding: 10px 0;
  background: #ffffff;
}

.tabListGroup .tab_content {
  position: relative;
  height: 100%;
}

.tabListGroup .tab_content li {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  /* overflow-y: auto; */
}

.newsBoardTitle {
  display: flex;
  gap: 10px;
  text-align: center;
  margin-right: 20px;
  padding: 10px;
  border-bottom: 1px solid var(--fit-black-light);
}

.newsBoardGroup {
  display: flex;
  flex-direction: column;
}

.newsBoardList {
  height: 300px;
  overflow-y: auto;
}

.newsBoardFooter {
  flex: 0 0 40px;
  display: flex;
  justify-content: flex-end;
}

.newsBoardList .item {
  display: flex;
  align-items: self-start;
  gap: 10px;
  padding: 10px;
  color: #00000095;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}

.newsBoardList .item:hover {
  background: #f7fafc;
  color: #000000;
}

.newsBoardList .time .content {
  display: inline-block;
  padding: 2px 10px;
  color: #ffffff;
  background: #56c8da;
  border-radius: 20px;
}

.newsBoardList .text {
  padding-top: 2px;
  line-height: 1.2;
}

.newsBoardTitle .time,
.newsBoardList .time {
  flex: 0 1 120px;
}

.newsBoardTitle .text,
.newsBoardList .text {
  flex: 1;
}

.newsBoardTitle .Unit,
.newsBoardList .Unit {
  flex: 0 1 100px;
}

/*月曆班表*/
.flatpickrGroup {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(0 0 0 / 14%);
  background: #ffffff;
}

.flatpickrItem {
  padding: 0 10px;
  margin-top: 10px;
}

.flatpickrGroup .title {
  margin: 0;
  padding: 0.5rem 0.4rem;
  color: #108d96;
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  background: #b9e8ea;
  border-bottom: 3px solid #ffffff00;
  transition: all 0.3s;
}

.flatpickrFooter {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.flatpickrColorType i {
  margin-right: 10px;
}

.type-today i {
  color: #92d2f1;
}

.type-preparationDay i {
  color: #fe2e2e;
}

.attendanceStaff {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  height: 370px;
}

.attendanceStaff .header-title {
  flex: 0 0 30px;
  padding: 4px 0;
  margin: 10px 0 2px 0;
  text-align: center;
  font-size: 1.125rem;
  background: #dee2e650;
  border-radius: 20px;
}

.attendanceStaff .body-list {
  flex: 1;
}
/*地圖人員內容設定*/
.mapboardList .item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid #ffffff30;
}

.mapboardList .name {
  color: #ffffff;
}

.mapboardList .name i {
  padding: 6px 6px;
  background: #3671d8;
  color: #ffffff;
  border-radius: 6px;
}

.mapboardList .text {
  padding: 0px 10px;
  border-radius: 4px;
  color: #fbdc61;
  background: #323c54;
}

@media (max-width: 414px) {
}

/* Dashboard 跑馬燈 */
/* 跑馬燈 */
.newsBox {
  display: flex;
  flex: 0 0 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  height: 35px;
  background: #fff;
  border-radius: 16px 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.newsBox > div,
.newsBox > ul {
  display: inline-block;
  vertical-align: top;
}

.newsIcon {
  position: relative;
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  color: #2e4765;
  font-size: 1.25rem;
}

ul.marquee {
  position: relative;
  width: 100%;
  height: 35px;
  margin: 0 10px;
  line-height: 1;
  list-style: none;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}

ul.marquee li {
  position: absolute;
  top: -999em;
  left: 0;
  display: block;
  white-space: nowrap;
  font: 1rem Arial, Helvetica, sans-serif;
  line-height: 35px;
  color: #000;
}

ul.marquee li a {
  color: #222938;
}

ul.marquee li a:hover {
  color: #000;
}

/* 災情看板 */
.dashboardInfoGroup {
  background: #222133;
  border: 1px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 2%);
}

.dashboard_titleSelection {
  position: relative;
}

.dashboard_titleSelection .form-control {
  background: #222133;
  color: #ffffff !important;
}

.dashboard_titleSelection option {
  appearance: none;
  background: #000;
  position: absolute;
  font-size: 1rem;
}

.open-map {
  z-index: 2;
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff80;
  text-align: center;
}

.open-map .iconBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #ffffff50;
  border-radius: 10px;
}

.open-map img {
  width: 80%;
  height: auto;
}

.open-map:hover {
  color: #ffffff;
}

.open-map:hover .iconBox {
  background: #ffffff;
}

.dashboard_titleSelection select {
  padding: 10px 10px;
  font-size: 1.875rem;
  color: #ffffff;
  border: 0;
  border-bottom: 1px solid #ffffff;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
  text-align: center;
}

.dashboardInfoGroup .card-body .row {
  margin: 10px 0;
  border-bottom: 1px solid #424154;
}

.dashboardInfoGroup .card-body .row:last-child {
  border-bottom: 0;
}

.dashboardInfoGroup .card-title {
  color: #f7941d;
  font-size: 1rem;
  font-weight: bold;
}

.dashboardInfoGroup .card-text {
  color: #ffffff;
  font-size: 1rem;
}

.dashboardInfoGroup .cardContent {
  padding: 0;
  height: 180px;
  overflow-x: hidden;
}

/*owl-carousel 輪播套件*/
.bg_Gradient_Green {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#78d8cd+0,6dd7cd+40,6dd7cd+40,1ed1ca+100 */
  background: rgb(120, 216, 205); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(120, 216, 205, 1) 0%,
    rgba(109, 215, 205, 1) 40%,
    rgba(109, 215, 205, 1) 40%,
    rgba(30, 209, 202, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(120, 216, 205, 1) 0%,
    rgba(109, 215, 205, 1) 40%,
    rgba(109, 215, 205, 1) 40%,
    rgba(30, 209, 202, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(120, 216, 205, 1) 0%,
    rgba(109, 215, 205, 1) 40%,
    rgba(109, 215, 205, 1) 40%,
    rgba(30, 209, 202, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78d8cd', endColorstr='#1ed1ca',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bg_Gradient_Red {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffb4a3+0,fd88a6+45,fd88a6+45,fd7aa8+100 */
  background: rgb(255, 180, 163); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 180, 163, 1) 0%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 122, 168, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 180, 163, 1) 0%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 122, 168, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(255, 180, 163, 1) 0%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 136, 166, 1) 45%,
    rgba(253, 122, 168, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb4a3', endColorstr='#fd7aa8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bg_Gradient_Blue {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a29bfe+0,9d9efe+45,74b9ff+100 */
  background: rgb(162, 155, 254); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(162, 155, 254, 1) 0%,
    rgba(157, 158, 254, 1) 45%,
    rgba(116, 185, 255, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(162, 155, 254, 1) 0%,
    rgba(157, 158, 254, 1) 45%,
    rgba(116, 185, 255, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(162, 155, 254, 1) 0%,
    rgba(157, 158, 254, 1) 45%,
    rgba(116, 185, 255, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bfe', endColorstr='#74b9ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*dashboard 標題*/
.sliderGroup {
  margin-bottom: 20px;
}

.sliderTitleItem {
  display: flex;
  margin-bottom: 10px;
}

.sliderTitleItem .name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.sliderTitleItem .name span {
  display: block;
  line-height: 1;
}

.sliderTitleItem .name .ch {
  color: #23557c;
  font-size: 1.25rem;
  font-weight: bold;
}

.sliderTitleItem .name .en {
  color: #74a3c7;
}
/*dashboard banner*/
.dashboardBannerGroup img {
  width: 100%;
}

.slick-next {
  display: block;
  width: 50px !important;
  height: 100px !important;
  background: #2b447650 !important;
  border-radius: 50px 0 0 50px;
}

.slick-prev {
  display: block;
  width: 50px !important;
  height: 100px !important;
  background: #2b447650 !important;
  border-radius: 0 50px 50px 0;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*個人儀錶板*/
.newsItem .item {
  height: 160px;
}

.newsItem .owl-card {
  position: relative;
  padding: 16px 16px;
  border-radius: var(--bs-border-radius-lg);
}

.newsItem .owl-card::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: url(../imagesBackend/Page/bg_marketing.png) no-repeat;
  background-position: 100% 100%;
  opacity: 0.5;
}

.newsItem .owl-card a {
  z-index: 2;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.newsItem .bg_book::before {
  background: url(../imagesBackend/Page/bg_book.png) no-repeat;
  background-position: 100% 100%;
}

.newsItem .bg_firemen::before {
  background: url(../imagesBackend/Page/bg_firemen.png) no-repeat;
  background-position: 100% 100%;
}

.newsItem .bg_calendar::before {
  background: url(../imagesBackend/Page/bg_calendar.png) no-repeat;
  background-position: 100% 100%;
}

.newsItem .owl-card .text {
  position: relative;
  z-index: 2;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-align: center;
  color: var(--fit-white);
}

.newsItem h4 {
  position: relative;
  z-index: 2;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  color: var(--fit-white);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.newsItem-carousel .text {
  height: 66px;
  line-height: 1.1;
  margin-bottom: 6px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff700;
  overflow: hidden;
}

.newsItem-carousel .time {
  color: #ffffff;
}

.newsItem-carousel .total {
  margin: 20px 0;
  line-height: 1.1;
  font-size: 3.125rem;
  font-weight: bold;
  color: #fff700;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.newsItem-carousel .total span {
  font-size: 1.25rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/*訓練與課程公告*/
.courseItem-carousel {
  position: relative;
  border-radius: 10px;
}

.courseItem-carousel .item {
  height: 156px;
}

.courseItemCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.courseItem-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 64px;
  padding: 10px 10px 10px 80px;
  background: #000000;
  border-radius: 16px 16px 0 0;
}

.courseItem-header.style1 {
  background: url(../imagesBackend/page/img_courseItem_style1.png) no-repeat;
  background-size: cover;
}

.courseItem-header.style2 {
  background: url(../imagesBackend/page/img_courseItem_style2.png) no-repeat;
  background-size: cover;
}

.courseItem-header.style3 {
  background: url(../imagesBackend/page/img_courseItem_style3.png) no-repeat;
  background-size: cover;
}

.courseItem-header .avatarImg {
  position: absolute;
  top: -20px;
  left: 8%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #000000;
  overflow: hidden;
}

.courseItem-header .name {
  line-height: 1;
  text-align: right;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.courseItem-header.style1 {
  height: 64px;
}

.courseItem-body {
  flex: 1;
  position: relative;
  padding: 10px 10px;
  background: #eeeeee;
  border-radius: 0 0 16px 16px;
}

.courseItem-body .btn-courseItem {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.courseItem-body > div {
  line-height: 1.2;
}

.courseItem-body .name {
  /* width: 300px; */
  min-height: 36px;
  overflow: hidden;
  margin-bottom: 6px;
  font-size: 1.125rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.courseItem-body .time {
  font-size: 0.85rem;
  font-weight: bold;
  color: #557ba7;
}

/*百分比卡片資訊*/
.statisticsItem-carousel .owl-card {
  padding: 10px;
  background: #ffffff;
  border-radius: 10px;
}

.statisticsItem-header {
  display: flex;
  justify-content: space-between;
}

.statisticsItem-header h4 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #8898aa;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.statisticsItem-header .text {
  color: #4d4f5c;
  font-size: 1.5rem;
  font-weight: bold;
}

.statisticsItem-body {
}

.statisticsItem-body .value {
  font-size: 1.25rem;
  /* font-size: 1rem; */
  color: #4d4f5c;
}

.statisticsItem-body .text {
  margin-left: 10px;
  font-size: 1rem;
  color: #4d4f5c;
}
/* 上升 */
.style-rise .value {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2dce98;
}
/* 下降 */
.style-decline .value {
  font-size: 1.25rem;
  font-weight: bold;
  color: #f53c56;
}

/* 照片輪播等高 */
.imgSlider .sliderImg {
  margin-right: 10px;
}

.imgSlider .sliderImg img {
  height: 200px;
}

.dashboardInfoGroup .imgSlider .slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #ffffff;
}

.dashboardInfoGroup .imgSlider .slick-dots li button:before {
  opacity: 0.25;
  color: #ffffff;
}

.imgSlider .slick-prev:before,
.imgSlider .slick-next:before {
  font-family: "slick";
  line-height: 1;
  opacity: 0.75;
  color: #ffffff;
}

h3.unitTitle {
  padding: 6px 0;
  text-align: center;
  color: rgb(108, 117, 125);
}

h5.card-header {
  font-size: 1.125rem;
}

h4.card-title {
  font-size: 1.125rem;
}

h5.card-title {
  font-size: 1rem;
}

/* card圓角 10px */
.card {
  border-radius: 1rem;
}

.card-header:first-child {
  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
}

.InfoSplitGroup .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card.close .card-body {
  display: none;
}

.card.close .card-header {
  border-bottom: 0;
}
/*圖台2-timelineGroup內樣式*/

.mapTimelineGroup,
.InfoSplitGroup {
  position: absolute;
  top: 0;
  height: 100%;
}

.InfoSplitGroup {
  padding: 0 10px;
}

.mapTimelineGroup {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  left: 0;
  width: calc(100% - 340px);
  transition: all 0.3s;
}

.mapTimelineGroup.full {
  width: 100%;
}

.mapSplit {
  position: relative;
  flex: 60%;
  overflow: hidden;
}

.mapSplit .mapArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.timelineGroup {
  flex: 1;
  display: flex;
  margin: 0 -2px;
  margin-bottom: 10px;
}

.InfoSplitGroup {
  width: 340px;
  left: 100%;
  display: flex;
  flex-direction: column;
  background: #f6f8fc;
  transition: all 0.3s;
}

.InfoSplitGroup.open {
  left: calc(100% - 340px);
}

.windowSplit {
  position: relative;
}

@media (max-width: 768px) {
  .mapTimelineGroup {
    width: calc(100% - 0px);
  }

  .InfoSplitGroup.open {
    z-index: 2;
    left: 0%;
    width: 100%;
  }
}

/*圖台2-timelineGroup內樣式-平移地圖*/
.direction {
  position: absolute;
  left: 10px;
  top: 100px;
  z-index: 999;
}

.direction-table {
  display: flex;
  flex-direction: column;
  background-color: #ffffff80;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  transition: all 0.3s;
}

.direction-table:hover {
  background-color: #ffffff;
}

.direction-tableTh {
  display: flex;
}

.direction-tableTd {
  width: 25px;
  height: 25px;
  text-align: center;
  vertical-align: middle;
}

.direction-tableTd a {
  display: block;
  color: #003d59;
}

.direction-tableTd a:hover {
  color: #089bab;
  font-weight: bold;
}

.direction-table img {
  width: 25px;
  height: auto;
}

.direction-zoom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.btn-search-o {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff70;
  color: #000000;
}

.btn-search-o:hover {
  background: #ffffff;
}

.direction-zoom a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 2px 0;
  font-size: 1.25rem;
  color: #000000;
  border-radius: 50%;
  background: #ffffff70;
}

.direction-zoom a:hover {
  background: #ffffff;
  color: #000;
  font-weight: bold;
}

.open-userWaterQueryGroup {
  z-index: 2;
  position: absolute;
  top: 36%;
  left: -100%;
  transform: translate(-50%, -50%);
}

.open-userWaterQueryGroup.open {
  top: 36%;
  left: 48px;
}

.direction {
  position: absolute;
  left: 10px;
  top: 56px;
  z-index: 999;
}

.direction img {
  width: 25px;
}
/*map2-查詢條件*/
.userWaterQueryGroup {
  z-index: 2;
  position: absolute;
  top: 68%;
  left: -170px;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
  padding: 10px;
  background: #ffffff70;
  border-radius: 10px;
  transition: all 0.3s;
}

.userWaterQueryGroup.open {
  top: 68%;
  left: 160px;
  transform: translate(-50%, -50%);
}

.userWaterQueryGroup a {
  position: absolute;
  right: 10px;
  top: 6px;
  color: #003d59;
}

.card-header a[class*="btn-icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1px;
  padding: 0 6px;
  border: 0;
}

.tip {
  display: inline-flex;
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: 16px;
  font-size: 0.875rem;
}

/*badge 內的關閉按鈕*/
.badge .btn-close {
  /* display: inline-flex;
  justify-content: center;
  margin-left: 10px;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: #ffffff;
  color: #000; */
}

.badge a i {
  margin-right: 0;
}
/* chartsItem 小區圖表高度 */
.chartsItem {
}

/* 直線 StraightTimeLine card+slider */
.StraightTimeLineGroup {
  position: relative;
}

.StraightTimeLine::after {
  content: " ";
  position: absolute;
  z-index: 1;
  left: -19px;
  top: 0px;
  display: block;
  width: 1px;
  height: 100%;
  border-radius: 999999px;
  background: #fbdc61;
  border: 1px solid #4d4d4d;
}

.StraightTimeLine {
  position: relative;
  padding-bottom: 20px;
}

.StraightTimeLine::before {
  content: " ";
  position: absolute;
  z-index: 2;
  left: -30px;
  top: 0px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 999999px;
  background: #fbdc61;
  border: 6px solid #4d4d4d;
}

.StraightTimeLine::before {
  content: " ";
  position: absolute;
  left: -30px;
  top: 0px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 999999px;
  background: #fbdc61;
  border: 6px solid #4d4d4d;
}

.timeLineCard {
  background: #f2f2f2;
  border-radius: 12px;
}

.timeLineCard .card-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: bold;
}

.card-time .name {
  line-height: 1.2;
  color: #383b4f;
  font-size: 1.125rem;
  font-weight: bold;
}

.card-time .time {
  line-height: 1.2;
  color: #4d4d4d;
  font-size: 0.875rem;
}

.card-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
  overflow: hidden;
  background: #000000;
}

.card-img img {
  width: 100%;
  height: auto;
}

/*批次匯入-importDataGroup*/
.group-header {
  display: flex;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  border-bottom: 1px solid #5167ad40;
}

.group-header .item {
  flex: 1;
  line-height: 1;
  padding: 1rem 1rem;
  font-size: 1.125rem;
  text-align: center;
  border-right: 1px solid #5167ad40;
}

.group-header .item:last-child {
  border-right: 0px solid #5167ad40;
}

.group-header .active {
  background: #5167ad;
  color: #ffffff;
  border: 1px solid #5167ad;
}

.fileItem {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 20vh;
  background: #00000050;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.importDataGroup .btnGroup {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.importDataGroup .btnGroup a {
  width: 100%;
}

.importDataGroup .group-body .importData {
  display: none;
}

.importDataGroup .group-body .importData.active {
  display: block;
}

.fancyImg img {
  height: 100px;
  width: auto;
}

.fancyVideo img {
  height: 100px;
  width: auto;
}

/*youtube iframe 尺吋*/
.video-container {
  width: 100%;
  height: 70vh;
}

/*備勤與排班管理系統*/
.shiftCalendarGroup {
  position: relative;
  display: flex;
  margin: 0 -10px;
}

.shiftQueryGroup {
  width: 350px;
  margin: 0 10px;
  transition: all 0.3s;
}

.calendarItem_xs {
  width: 100%;
  height: 330px;
}

.calendarItem_lg {
  position: sticky;
  top: 50px;
  width: 100%;
  min-height: 600px;
}

.mainCalendar {
  flex: 1;
  margin: 0 10px;
}

a.open-shiftQueryGroup {
  display: none;
}

a.close-shiftQueryGroup {
  display: none;
}

@media (max-width: 768px) {
  .shiftQueryGroup {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    background: #ffffff;
  }

  .calendarItem_lg {
    position: unset;
    top: 50px;
    width: 100%;
    min-height: 600px;
  }

  .shiftQueryGroup.close {
    left: -110%;
  }

  .mainCalendar {
    width: 100%;
  }

  a.open-shiftQueryGroup {
    display: block;
  }
}

/*日曆套件樣式*/
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
  min-height: 0.5rem;
}

/*input取消按鈕 jq-input-remove*/
.jq-input-remove {
  position: relative;
}

.jq-input-remove > i {
  z-index: 100;
  position: absolute;
  right: 10px;
  top: 8px;
  cursor: pointer;
  visibility: hidden;
}

/* 視覺化隨選分析 */
.chartBlock {
  height: 390px;
  padding: 10px;
  border: 1px #00000010 solid;
  border-radius: 6px;
}

.chartBlock .charts {
  height: 310px;
}

.searchBlock {
  height: 390px;
  padding: 10px;
  border-radius: 6px;
  border: 1px rgba(108, 117, 125, 0.8) solid;
  background: rgb(248, 249, 250);
}

.searchBlock .quickMenuBox {
  height: calc(100% - 40px);
  overflow-y: auto;
  margin: 0;
}

/* 視覺化隨選分析首頁 */
.reportStatisticsGroup {
  height: 100%;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  overflow: hidden;
}

.report-Title {
  position: relative;
}

.report-Title .text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 10px 30px 10px;
  border-bottom: 10px solid #64697e95;
  color: #ffffff;
}

.report-Title .reportTitleBg {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
}

.report-Title .reportTitleBg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 150%;
}

.report-Title .text > div {
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

.report-Title .name {
  font-size: 1.6rem;
}

.report-Title .btn-more {
  z-index: 2;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.report-Body {
  border-top: 10px solid #64697e50;
  padding: 6px 10px 10px 10px;
}

.reportItem {
  padding: 10px 0;
  border-bottom: 1px dashed #64697e80;
}

.reportItem:last-child {
  /* padding-bottom: 0; */
  /* border-bottom: 0; */
}

.reportItem i::before {
  color: #000000;
  margin-right: 10px;
}

/*圖台-資料*/
.card-text {
  display: inline-block;
  padding: 0.1rem 0.2rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--fit-black-light);
  background-color: var(--fit-light);
}

.card-red {
  border: 1px solid var(--fit-red);
  background-color: var(--fit-red);
  color: var(--fit-light);
}

.card-yellow {
  border: 1px solid var(--fit-yellow);
  background-color: var(--fit-yellow);
  color: var(--fit-dark);
}

.card-green {
  border: 1px solid var(--fit-green-dark);
  background-color: var(--fit-green-dark);
  color: var(--fit-light);
}

.card-grey {
  border: 1px solid var(--fit-black-dark);
  background-color: var(--fit-black-dark);
  color: var(--fit-light);
}

.card-blue {
  border: 1px solid var(--fit-blue-dark);
  background-color: var(--fit-blue-dark);
  color: var(--fit-light);
}

.card-purple {
  border: 1px solid var(--fit-purple-dark);
  background-color: var(--fit-purple-dark);
  color: var(--fit-light);
}

/*水位圓餅圖*/
.circleChart-area {
  display: inline;
}

.circleChart-group {
  display: inline-flex;
  flex-wrap: wrap;
}

.circleChart-item {
  display: inline-block;
  width: calc(9.8% + 2px);
  /* margin-left: -4px; */
  margin-left: 0px;
  margin-bottom: 0.5rem;
  padding: 10px 10px;
  text-align: center;
  background: rgba(var(--bs-success-rgb), 0.1);
}

.circleChart-item > div {
  margin-bottom: 0.15rem;
  line-height: 1;
}

.circleChart-item .group-name {
  height: 1.5rem;
  text-align: left;
  font-size: 1.25rem;
  color: var(--fit-black-dark);
  font-weight: bold;
}

@media (max-width: 1024px) {
  .circleChart-item {
    width: calc(16.4% + 2px);
  }
}

@media (max-width: 576px) {
  .circleChart-item {
    width: calc(50% + 2px);
  }

  .circleChart-item {
    margin-left: -4px !important;
  }
}

.height-20 {
  max-height: 20rem;
  overflow-y: auto;
}

.trendChart-group {
  height: 500px;
}

/*accordion手風琴開關*/
.fit-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.8rem 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}

.fit-accordion-header input[type="checkbox"] {
}

.fit-accordion-item {
  margin-bottom: 0.5rem;
  border: 1px solid var(--fit-black-light);
}

.fit-accordion-body {
  max-height: 500px;
  overflow-y: auto;
}

.fit-accordion-content {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--fit-black-light);
}

.fit-accordion-body {
  display: none;
}

.fit-accordion-body .fit-accordion-content:last-child {
  border-bottom: 0;
}

.fit-accordion-closed .fit-accordion-header {
  border-bottom: 0;
}

/* 預設狀態（箭頭向右） */
.fit-accordion-header .icon {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}
/* 展開狀態（箭頭向右旋轉45度） */
.fit-accordion-item:not(.fit-accordion-closed) .icon {
  transform: rotate(90deg);
}

/* 如果你想轉90度，直接改成 90deg 就好 */
.fit-accordion-item:not(.fit-accordion-closed) .fit-accordion-body {
  display: block;
}

/*badgeGroup*/
.badgeGroup {
  padding: 0.5rem 0;
}
.badge a {
  display: inline-flex;
  justify-content: center;
  margin-left: 10px;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: #ffffff;
  color: #000;
}

/*檔案上傳*/
.table-img img {
  width: 150px;
  height: auto;
}