:root {
  --gradient-colors: #FCEFBD, #fff;
  --bs-blue: #3457c9;
  --bs-blue-light: #DDEEF4;
  --bs-red: #FF0000;
  --bs-indigo: #4f728e;
  --bs-indigo-button: #253F5B;
  --bs-purple: #6771be;
  --bs-purple-light: #E6E0F8;
  --bs-pink: #BF4582;
  --bs-orange: #FF9300;
  --bs-yellow: #FFED00;
  --bs-yellow-light: #FFF4CC;
  --bs-green: #2A9823;
  --bs-green-light: #DFF4DD;
  --bs-teal: #41757e;
  --bs-teal-light: #E7F4F5;
  --bs-cyan: #5e9eba;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #414A53;
  --bs-primary: #2755CF;
  --bs-secondary: #75828C;
  --bs-success: #109439;
  --bs-info: #4BBED8;
  --bs-warning: #FF9E00;
  --bs-danger: #dc3545;
  --bs-light: #C5CDD5;
  --bs-dark: #212529;
  --bs-magenta: #de8073;
  --bs-brown: #74412B;
  --bs-brown-light: #BE8260;
  --bs-brown-light-s: #D7B095;
  --main-padding: 15px;
  --bs-font-sans-serif: "Open Sans",Arial, Helvetica, sans-serif, 微軟正黑體, cwTeXHei, "Noto Sans TC", sans-serif;
  --bs-gradient: linear-gradient(180deg, rgba(67, 118, 213, 0.567), rgba(255, 255, 255, 0));
}

body {
  margin: 0;
  font: 18px/1.2 var(--bs-font-sans-serif);
}
.header .logo {
  float: left;
  /* margin: 5px 0 0 5px; */
}
.header .logo span{
  vertical-align: middle
}
 a:hover{
 text-decoration: none!important;
}
.sidebar-left .sidebar-header .sidebar-toggle i {

  font-size: 1.5rem;color:rgba(0, 0, 0, 0.55)
 
}
.sidebar-left {
  overflow-y: auto;
}
.sidebar-left::-webkit-scrollbar-track {
  background-color: #ddd;
}
.sidebar-left::-webkit-scrollbar {
  width: 8px;
  background-color: #ddd;
}
.sidebar-left::-webkit-scrollbar-thumb {
  background-color: rgb(83, 99, 104);
}
a {
  border:2px dotted rgba(255,255,255,.0)
}
a:focus {
  border:2px dotted #024a99
}
dt {
  text-align: right !important
}
@media only screen and (max-width: 990px) {
  .system_logo {
    display: none
  }
  .show_secfile {
    width: 45%
  }
  .form-container h1{
    text-shadow: -3px -3px 0 white, -3px -2px 0 white, -3px -1px 0 white, -3px 0px 0 white, -3px 1px 0 white, -3px 2px 0 white, -3px 3px 0 white, -2px -3px 0 white, -2px -2px 0 white, -2px -1px 0 white, -2px 0px 0 white, -2px 1px 0 white, -2px 2px 0 white, -2px 3px 0 white, -1px -3px 0 white, -1px -2px 0 white, -1px -1px 0 white, -1px 0px 0 white, -1px 1px 0 white, -1px 2px 0 white, -1px 3px 0 white, 0px -3px 0 white, 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white, 0px 1px 0 white, 0px 2px 0 white, 0px 3px 0 white, 1px -3px 0 white, 1px -2px 0 white, 1px -1px 0 white, 1px 0px 0 white, 1px 1px 0 white, 1px 2px 0 white, 1px 3px 0 white, 2px -3px 0 white, 2px -2px 0 white, 2px -1px 0 white, 2px 0px 0 white, 2px 1px 0 white, 2px 2px 0 white, 2px 3px 0 white, 3px -3px 0 white, 3px -2px 0 white, 3px -1px 0 white, 3px 0px 0 white, 3px 1px 0 white, 3px 2px 0 white, 3px 3px 0 white
  }
  .form-container .login-container .form-part .login {
    margin: auto;
    margin-top: 0px !important;
  }
  .login-bg{margin:0px;padding:0px;background-image:
    linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0)), url('../images//bg-footer-md.jpg')!important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, bottom right, bottom right;
  background-size: cover;}
  .form-container .login-container .form-part {
    background-color: #FFF;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 20px 40px !important;
  }
  dt {
    text-align: left !important
  }
}
a[href^=tel] {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.bg-o8 {
  opacity: 0.85;
  filter: alpha(opacity=85);
}
.bg-o6 {
  opacity: 0.65;
  filter: alpha(opacity=65);
}
.bg-top {
  background-image: linear-gradient(180deg, var(--gradient-colors));
}

.bg-gradient{background:var(--bs-gradient)}
.text-gradient{  background-image: linear-gradient(45deg, #f3ec78, #af4261);}
.bg-blue {
  background-color: var(--bs-blue) !important;
}
.bg-blue-light {
  background-color: var(--bs-blue-light) !important;
}
.text-blue {
  color: var(--bs-blue) !important;
}
.bg-green {
  background-color: var(--bs-green) !important;
}
.bg-green-light {
  background-color: var(--bs-green-light) !important;
}
.text-green {
  color: var(--bs-green) !important;
}
.bg-all {
  background-color: var(--bs-yellow-light) !important;
}
.bg-yellow {
  background-color: var(--bs-yellow) !important;
}
.bg-light {
  background-color: var(--bs-light) !important;
}
.text-yellow {
  color: var(--bs-yellow) !important;
}
.bg-magenta {
  background-color: var(--bs-magenta) !important;
}
.text-magenta {
  color: var(--bs-magenta) !important;
}
.border-magenta {
  border-color: var(--bs-magenta) !important;
}
.bg-brown-light {
  background-color: var(--bs-brown-light) !important;
}
.bg-brown-light-s {
  background-color: var(--bs-brown-light-s) !important;
}
.text-brown-light {
  color: var(--bs-brown-light) !important;
}
.btn-outline-brown {
  color: var(--bs-brown) !important;
  border-color: var(--bs-brown-light-s) !important;
}
.border-brown-s {
  border-color: var(--bs-brown-light-s) !important;
}
.bg-yellow-light {
  background-color: var(--bs-yellow-light) !important;
}
.text-yellow {
  color: var(--bs-yellow);
}
.bg-orange {
  background-color: var(--bs-orange);
}
.text-orange {
  color: var(--bs-orange);
}
.bg-secondary {
  background-color: var(--bs-secondary) !important;
}
.text-secondary {
  color: var(--bs-secondary) !important;
}
.bg-red {
  background-color: var(--bs-red);
}
.text-red {
  color: var(--bs-red) !important;
}
.bg-indigo {
  background-color: var(--bs-indigo);
}
.btn-indigo {
  background-color: var(--bs-indigo-button);
  padding: 0px 10px !important
}
.text-indigo {
  color: var(--bs-indigo) !important;
}
.border-indigo {
  border-color: var(--bs-indigo) !important;
}
.bg-purple {
  background-color: var(--bs-purple);
}
.bg-purple-light {
  background-color: var(--bs-purple-light);
}
.border-purple {
  border-color: var(--bs-purple) !important;
}
.text-purple {
  color: var(--bs-purple) !important;
}
.bg-pink {
  background-color: var(--bs-pink);
}
.text-pink {
  color: var(--bs-pink) !important;
}
.bg-cyan {
  background-color: var(--bs-cyan);
}
.text-cyan {
  color: var(--bs-cyan) !important;
}
.bg-teal {
  background-color: var(--bs-teal) !important;
}
.bg-teal-light {
  background-color: var(--bs-teal-light) !important;
}
.text-teal {
  color: var(--bs-teal) !important;
}
.border-teal {
  border-color: var(--bs-teal) !important;
}
.bg-brown {
  background-color: var(--bs-brown);
}
.text-brown {
  color: var(--bs-brown);
}
.border-brown {
  border-color: var(--bs-brown) !important;
}
th.actions, td.actions {
  width: 10px;
  white-space: nowrap;
}
.jstree-default-dark {
  background: none;
}
.jstree-default-dark .jstree-anchor input {
  color: #333;
}
.content-body {
  padding: 15px;
}
.dataTables_wrapper .pagination {
  margin-top: 0.85em !important;
}
.modal-body {
  max-height: calc(100vh - 200px);
  overflow: auto;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0;
}

.sidebar-left {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b09b+0,024a99+100 */
  background: #00b09b; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffffff 0%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bdaa', endColorstr='#024a99', GradientType=1); /* IE6-9 fallback on horizontal gradient */
  z-index: 1010;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1)
}
/*newsticker*/
#ticker_container {
  background: #fff;
  padding: 10px;
  border: 0px solid #FF8A8A;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  overflow: auto;
}
.header {
  border-bottom: 3px solid #70bdc3;
  height: 65px;
}
.sidebar-left .sidebar-header .sidebar-title {
  background: #fff;
  color:rgba(0, 0, 0, 0.55);
  padding: 17px;
}
.sidebar-left .sidebar-header .sidebar-toggle {
  background-color: #fff;
  height: 50px;
}
.page-header {
  background: #f8f8f8;
  border-left: 1px solid #fff;
}
.page-header h2 {
  color: #70bdc3;
  border-bottom: 4px solid #70bdc3;
}
ul.nav-main {
  margin-right: 0px;
}
.ul.nav-main li{margin-bottom:3px!important}
ul.nav-main li a {
  display: block;
  color: #004a98;
  font-weight: bold;
  font-size: 20px;
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); */
}
ul.nav-main li a:hover {
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); */
}
ul.nav-main li.nav-expanded a {
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
ul.nav-main > li.nav-active > a:hover {
  color: #fff;
}
ul.nav-main li.nav-parent {
  position: relative;
}
ul.nav-main > li.nav-expanded > a {
  background: #00ae9a;
}
ul.nav-main li .nav-children {
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: none;
  padding: 0;
}
ul.nav-main li .nav-children li a {
  padding: 6px 15px 6px 60px;
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  border-bottom: 1px solid rgba(0,0,0,.2); text-shadow:none;
}
ul.nav-main li .nav-children li a:hover {
  opacity: .7
}
ul.nav-main > li > a:hover, ul.nav-main > li > a:focus {
  background-color: #1460ab;
}
ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus {
  background: var(--bs-blue-light);   border:2px dotted  var(--bs-blue);  color: var(--bs-blue);
}
ul.nav-main li.nav-parent > a:after {
line-height: 2rem;
}
ul.nav-main li .nav-children .nav-children li a {

  padding: 6px 15px 6px 55px;
}
ul.nav-main li .nav-children .nav-children li a::before {
  content: '►';
  color: var(--bs-blue);vertical-align: top;
  font-size: .7rem
}
ul.nav-main li .nav-children .nav-children li a:hover {
  opacity: .7
}
ul.nav-main li .nav-children .nav-children .nav-children li a {
  padding: 6px 15px 6px 75px;
}
ul.nav-main li .nav-children .nav-children .nav-children li a:hover {
  opacity: .7
}
.userbox.show .dropdown-menu a {

  font-size: 1rem;
}
html body .tabs .nav-tabs .nav-link:hover, html.dark body .tabs .nav-tabs .nav-link:hover, html body .tabs .nav-tabs .nav-link:focus, html.dark body .tabs .nav-tabs .nav-link:focus {
  border-top-color: #0088cc;
  background: #fff;
}
.nav-tabs li .nav-link, .nav-tabs li .nav-link:hover {
  background: #fff;
  border-bottom: none;
  border-left: 1px solid #EEE;
  border-right: 1px solid #EEE;
  border-top: 3px solid #EEE;
  color: #CCC;
}
/* Labels for checked inputs */
input:checked + label {
  color: #41757e;
  font-weight: bold
}
.card {
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.15);
  margin-top: .5rem !important;
}
.card-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 20px;
  padding: 3px 5px;
  text-transform: none;
  display: inline
}
.rounded-lg {
  border-radius: 2rem;
}
.rounded-md {
  border-radius: .5rem;
}
.custom-control.border-switch {
  --color: #41757e;
  padding-left: 0;
}
.custom-control.border-switch .border-switch-control-input {
  display: none;
}
.custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator {
  border-color: var(--bs-blue);
}
.custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator::after {
  left: 14px;
  background-color: var(--bs-blue);
}
.custom-control.border-switch .border-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
}
.custom-control.border-switch .border-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}
.custom-control.teleport-switch {
  --color: #41757e;
  padding-left: 0;
}
.custom-control.teleport-switch .teleport-switch-control-input {
  display: none;
}
.custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator {
  border-color: var(--color);
}
.custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::after {
  left: -14px;
}
.custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::before {
  right: 2px;
  background-color: var(--color);
}
.custom-control.teleport-switch .teleport-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
  overflow: hidden;
}
.custom-control.teleport-switch .teleport-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}
.custom-control.teleport-switch .teleport-switch-control-indicator::before {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  right: -14px;
  background: #ccc;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination .page-item.active .page-link {
  background-color: var(--bs-teal) !important;
  border-color: var(--bs-teal) !important;
}
.tabbed {}
.tabbed > [type="radio"] {
  /* hiding the inputs */
  display: none !important;
}
.tabs {
  display: flex;
  align-items: stretch;
  list-style: none;
  padding: 0;
  border-bottom: 0px solid #ccc;
}
.tab > label {
  display: block;
  margin-bottom: -1px;
  padding: 10px;
  border-radius: 15px;
  background-color: #E9E9E9;
  margin-right: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.tab_active {
  color: #ff6600 !important;
}
.tab u {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"
}
.tab:hover label {
  border-top-color: #333;
  color: #333;
}
.tab-content {
  display: none;
  padding: 2px;
  border: none
}
.tab-content2 {
  display: none;
  box-shadow: none !important;
  border: 0px !important
}
/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label, 
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label, 
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label, 
.tabbed [type="radio"]:nth-of-type(6):checked ~ .tabs .tab:nth-of-type(6) label {
  background: var(--bs-purple) !important;
  color: #fff;
}
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3), 
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4), 
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tab-content:nth-of-type(5), 
.tabbed [type="radio"]:nth-of-type(6):checked ~ .tab-content:nth-of-type(6) {
  display: block;
  box-shadow: none;
}
/**/
.nav-hover ul {
  display: flex;
  list-style: none;
}
.nav-hover li {
  margin: 0 2px;
}
.nav-hover a {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2px 5px;
  font-size: .8rem;
  background-color: #fff;
  border: 1px solid #B4C5C8;
  text-decoration: none;
  color: #41757e;
  transition: color 0.5s ease;
}
.nav-hover a::before, .nav-hover a::after {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  top: 0;
  bottom: 0;
  width: 0;
}
.nav-hover a::before {
  left: 0;
  transition: width 0s ease, background 0.5s ease;
}
.nav-hover a::after {
  right: 0;
  background: #41757e;
  transition: width 0.5s ease;
}
.nav-hover a:hover {
  color: rgba(255, 255, 255, 0.87);
}
.nav-hover a:hover::before {
  width: 100%;
  background: #41757e;
  transition: width 0.5s ease;
}
.nav-hover a:hover::after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}
.tree li {
  list-style-type: none;
  margin: 0;
  padding: 10px 5px 0 5px;
  position: relative
}
.tree li a {
  color: var(--bs-teal) !important;
}
.tree li a:hover {
  color: var(--bs-info) !important;
}
.tree li::before, .tree li::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto
}
.tree li::before {
  border-left: 1px solid #609CA7;
  bottom: 50px;
  height: 100%;
  top: 0;
  width: 1px
}
.tree li::after {
  border-top: 1px solid #609CA7;
  height: 20px;
  top: 25px;
  width: 25px
}
.tree li span {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #609CA7;
  border-radius: 3px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  cursor: pointer;
}
.tree > ul > li::before, .tree > ul > li::after {
  border: 0
}
.tree li:last-child::before {
  height: 27px
}
.tree li span:hover {
  background-color: var(--bs-white) !important;
  border: 1px solid var(--bs-info) !important;
}
[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
  display: none;
}
.widget-summary .summary-icon {
  margin-right: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 55px;
}
.widget-summary .summary {
  min-height: 5px;
  word-break: break-all;
  font-size: 1.1rem;
  color: #000
}
.bg-primary .widget-summary .summary-footer a {
  color: #ff0 !important;
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 1 !important
}
.lh-lg {
  line-height: 1.5rem
}
/*login*/
.login-body {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,89c3eb+50,abd3ee+50,d5ebfb+100 */
  background: #ebf1f6; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ebf1f6 0%, #89c3eb 50%, #abd3ee 50%, #d5ebfb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ebf1f6 0%, #89c3eb 50%, #abd3ee 50%, #d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ebf1f6 0%, #89c3eb 50%, #abd3ee 50%, #d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.title_border {
  position: relative;
  display: inline-block;
}
.title_border:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 10px auto;
  width: 60%;
  height: 5px;
  background-color: var(--bs-brown-light-s);
}
.form-container .login-container {
  z-index: 999;

}
.form-container .login-container .content-part {
  background-image:
    linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0)), url('../images//bg-footer-md.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, bottom right, bottom right;
  background-size: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 50px;
}
.form-container .login-container .content-part img {
  max-width: 100%;
}
.form-container .login-container .content-part p {
  font-size: 0.9rem;
  text-align: center;
}
.form-container .login-container .form-part {
  background-color: #FFF;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;

}
.form-container .login-container .form-part .signinlink {
  text-align: right;
  font-size: .85rem;
  margin-top: -20px;
}
.form-container .login-container .form-part .signinlink a {
  color: #000
}
.form-container .login-container .form-part .formcol {
  margin: auto;
}
.form-container .login-container .form-part .formcol h3 {
  text-align: center;
  margin: 40px 0px;
  font-size: 2rem;
}
.form-container .login-container .form-part .formcol h3:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 10px auto;
  width: 100%;
  height: 5px;
  background-color: var(--bs-cyan);
}
.form-container .login-container .form-part .login {
  margin: auto;
  margin-top: 50px;
}
.form-container .login-container .form-part .form-floating .btn {
  width: 100%;
  margin-top: 15px;font-size: 1.1rem;
}
.form-container .login-container .form-part .form-floating .form-control {
  background-color: #cccccc24;
}
.form-container .login-container .form-part .form-floating .form-control:hover {
  border: 2px solid #0d6efd;
  box-shadow: none;
}
.form-container .login-container .form-part .form-floating .form-control:focus {
  border: 2px solid #0d6efd;
  box-shadow: none;
}
.form-container .login-container .form-part .form-floating .form-control:active {
  border: 2px solid #0d6efd;
  box-shadow: none;
}
.one {
  text-align: center;
  padding: 10px;
}
.one a {
  text-decoration: none;
  font-size: .9rem;
  color: #4f728e;
  font-weight: 900;
  margin: 0 10px 0 0;
  position: relative;
}
.one a:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #de8073;
  content: '';
  -webkit-transform: translateY(8px);
  opacity: 0;
  transition-property: -webkit-transform, opacity;
  transition-duration: .3s;
}
.one a:hover:before {
  -webkit-transform: translateY(0);
  opacity: 1;
}
.two {
  margin: 0px auto;
}
.two a {
  text-decoration: none;
  font-size: .9rem;
  color: #5e9eba;
  font-weight: bold;
  margin: 0 2px;
  position: relative;
}
.two a:before {
  position: absolute;
  margin: 0 auto;
  top: 100%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #7dcaec;
  content: '';
  opacity: .3;
  -webkit-transform: scaleX(.9);
  transition-property: opacity, -webkit-transform;
  transition-duration: .3s;
}
.two a:hover:before {
  opacity: 1;
  -webkit-transform: scaleX(1);
}
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}
#bar-chart {
  width: 500px;
  height: 300px;
  position: relative;
}
#line-chart {
  width: 500px;
  height: 300px;
  position: relative;
}
#bar-chart::before, #line-chart::before {
  content: "";
  position: absolute;
  display: block;
  width: 240px;
  height: 30px;
  left: 155px;
  top: 254px;
  background: #FAFAFA;
  box-shadow: 1px 1px 0 0 #DDD;
}
#pie-chart {
  width: 500px;
  height: 250px;
  position: relative;
}
#pie-chart::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 115px;
  left: 315px;
  top: 0;
  background: #FAFAFA;
  box-shadow: 1px 1px 0 0 #DDD;
}
#pie-chart::after {
  content: "";
  position: absolute;
  display: block;
  top: 260px;
  left: 70px;
  width: 170px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
}
.header .toggle-sidebar-left {
  background: #0088cc;
  cursor: pointer;
  height: 35px;
  width: 35px;
  line-height: 35px;
}
.header .toggle-sidebar-left:hover {
  background: #68b3d9;
}
.news {
  width: 100px;line-height: 1.8rem;
  text-shadow: -2px -2px 0 rgba(0,0,0,.2),-2px -1px 0 rgba(0,0,0,.2),-2px 0px 0 rgba(0,0,0,.2),-2px 1px 0 rgba(0,0,0,.2),-2px 2px 0 rgba(0,0,0,.2),-1px -2px 0 rgba(0,0,0,.2),-1px -1px 0 rgba(0,0,0,.2),-1px 0px 0 rgba(0,0,0,.2),-1px 1px 0 rgba(0,0,0,.2),-1px 2px 0 rgba(0,0,0,.2),0px -2px 0 rgba(0,0,0,.2),0px -1px 0 rgba(0,0,0,.2),0px 0px 0 rgba(0,0,0,.2),0px 1px 0 rgba(0,0,0,.2),0px 2px 0 rgba(0,0,0,.2),1px -2px 0 rgba(0,0,0,.2),1px -1px 0 rgba(0,0,0,.2),1px 0px 0 rgba(0,0,0,.2),1px 1px 0 rgba(0,0,0,.2),1px 2px 0 rgba(0,0,0,.2),2px -2px 0 rgba(0,0,0,.2),2px -1px 0 rgba(0,0,0,.2),2px 0px 0 rgba(0,0,0,.2),2px 1px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2)
}
.news-scroll {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */
}
.news-scroll a {
  text-decoration: none;
}
.news-span {
  width: 20px;
  display: inline-block
}
.avatar-xs {
  height: 1.5rem;
  width: 1.5rem
}
.avatar-sm {
  height: 3rem;
  width: 3rem
}
.avatar-md {
  height: 4.5rem;
  width: 4.5rem
}
.avatar-lg {
  height: 6rem;
  width: 6rem
}
.avatar-xl {
  height: 7.5rem;
  width: 7.5rem
}
.avatar-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #395FAE;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 600;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%
}
.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: .5rem;
  overflow: hidden;
  font-size: .675rem;
  background-color: #eef2f7;
  border-radius: 0.25rem;
}
.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.row.equal-cols:before, .row.equal-cols:after {
  display: block;
}
.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.badge-on {
  height: 26px;
  line-height: 1.1rem;
  margin-right: 3px;
  margin-bottom: 3px;
  padding: 3px 9px;
  font-weight: normal;
  letter-spacing: 1px;
}
.col-count {
  column-count: 2;
  column-gap: 20px;
}
@media only screen and (max-width: 1200px) {
  .col-count {
    column-count: 1;
    column-gap: 20px;
  }
}
.flash-info {
  animation: glowing 1300ms infinite;
}
.flash-info-alert {
  animation: glowing-alert 1300ms infinite;
}
@keyframes glowing {
  0% {
    -webkit-filter: contrast(1);
  }
  50% {
    -webkit-filter: contrast(1.5n);
    outline: 3px solid var(--bs-red);
  }
  100% {
    -webkit-filter: contrast(1);
  }
}
@keyframes glowing-alert {
  0% {
    -webkit-filter: contrast(1);
  }
  50% {
    -webkit-filter: contrast(5);
  }
  100% {
    -webkit-filter: contrast(1);
  }
}
.widget-summary .summary .title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--bs-teal);
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: 5px
}
.widget-summary .summary .amount {
  margin-right: 1rem;
  font-weight: 600;
  color: var(--bs-orange);
  vertical-align: middle;
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  display: contents;
}
.card-body {
  padding: 10px
}
ul.simple-bullet-list li .title {
  font-size: 1.2rem;
}
.card-header {
  display: inline-block !important;
  padding: 10px;
}
.card-actions {
  float: none;
  margin-bottom: 15px;
  position: absolute;
  top: 10px;
  text-align: right;
  color: #000
}
.weather_bg {
  background-image: url("../images/weather_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.icon_bg {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 55px;
}
.display-5 {
  margin-top: 5px;
  font-weight: 600;
  color: var(--bs-orange);
  vertical-align: middle;
  font-size: 1.8rem;
  font-family: Arial, Helvetica, sans-serif;
}
.userbox .name {
  font-size: 1.2rem;
}
.title2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--bs-teal);
  margin-top: 0px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d4d4d4;
}
.text-align-1 {
  text-align: left;
}
.text-align-2 {
  text-align: right;
}
@media only screen and (max-width: 600px) {
  .text-align-1 {
    text-align: center;
  }
  .text-align-2 {
    text-align: center;
  }
}

.line-thru {
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
  position: relative;height: 20px;
}
.line-thru span{
  position: absolute;
  z-index: 2;
top: 0px;left: 47%;
color:#d4d4d4;background-color: #fff;width:20px
}
.line-thru:before {
  background-color: rgba(255,255,255,.0);
  content: '';
  height: 10px;
  left: 50%;
  position: absolute;
  margin: -5px 0 0 -20px;
  top: 50%;
  width: 40px;
  z-index: 2;
}
.line-thru:after {
  border-bottom: 1px solid #DADADA;
  content: '';
  display: block;
  left: 0px;
  position: absolute;
  top: 47%;
  width: 100%;
  z-index: 1;
}

/* 全域設定所有 modal-open 的 padding-right (因開啟modal時會有偏移問題)*/
.modal-open {
  padding-right:0px !important;
}

/* 全域設定所有 #datatable 的 thead */
/* 註：排除活動查詢的 #activity-intergrate */
table:not(#activity-intergrate,#motoProcessTable,#warningCloseTable) thead tr th{ 
  width: unset !important;
}


/* 全域設定 apexchart 的 datalabels 全事件不透明 */
.apexcharts-datalabels{
  opacity: 1 !important;
}


/* 全域設定 vue-datetime 日期選擇時高度固定 */
.vdatetime-calendar__month{
  /* height:315px !important; */
  height: 295px;
}


#chartAllScenicAreaPeopleFlowPop .modal-footer .btn{
  display: none !important;
}

#parkingAreaStatusPop .modal-footer .btn{
 
  display: none !important;
}
#popluarScenicAreaPop .modal-footer .btn{
  display: none !important;
}

#allScenicAreaPeopleFlowPop .modal-footer .btn{
  display: none !important;
}

#chartPop{
  max-width: 40vw;
  margin: 0 auto;

}

.bg-gmapInfo{
  background-color: #cbcbcb;
}

.color-female {
  color: #fe8f1d;
}

.bg-female {
  background-color: #f6ab5f;
}

.color-male {
  color: #abcd03;
}

.bg-male {
  background-color: #becd72;
}

.color-accessible {
  color: #0086c9;
}

.bg-accessible {
  background-color: #0094e0;
}

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-bottom-right-4 {
  border-bottom-right-radius: 1rem;
}

.rounded-bottom-left-4 {
  border-bottom-left-radius: 1rem;
}

#modalPop .modal-footer .btn{
  display: none !important;
}

/* 隱藏全域 recaptcha icon */
.grecaptcha-badge {
  visibility: hidden !important;
}

@media screen and (min-width: 766px) {
  .vdatetime-popup{
    top: calc(50% + 30px) !important;
  }
  
}