html {
   font-size: 1rem;
}

body {
   font-family: Microsoft JhengHei;
   background-color: #3c7aa9;
}

.form-control:focus {
   outline: 2px dashed #e50051 !important;
   outline-offset: -2px !important;
   opacity: 1 !important;
}

a:focus, input:focus {
   outline: 2px dashed #e50051 !important;
   outline-offset: -2px !important;
   opacity: 1 !important;
}

/*選擇字型大小*/
.font_small,
.font_small_selected {
   font-size: 100%;
}

.font_middle,
.font_middle_selected {
   font-size: 110%;
}

.font_large,
.font_large_selected {
   font-size: 120%;
}

.main {
   width: 100%;
   display: flexbox;
   margin-left: auto;
   margin-right: auto;
   background-color: #fff;
}

.divTopMenu {
   background-color: #687172;
   text-align: right;
   color: #fff;
   padding-top: 2px;
   padding-right: 5px;
}

   .divTopMenu a {
      color: #fff;
      text-decoration: none;
   }

      .divTopMenu a:hover {
         color: #333333;
      }

   .divTopMenu .font_size {
      border: 1px solid #ffffff;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      border-radius: 3px;
      margin: 0 0.125rem 0.125rem 0.313rem;
      padding: 0 0.188rem 0 0.188rem;
   }

   .divTopMenu .font_small_selected,
   .divTopMenu .font_middle_selected,
   .divTopMenu .font_large_selected {
      color: #687172;
      background-color: #fff;
   }

@media (max-width: 992px) {
   .divTopMenu {
      display: none;
   }
}

.top_menu {
   /*max-width: 1366px;*/
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   background-color: #fff;
}

.LoginInfo {
   font-size: 85%;
}

#navbar_top #navbarNav {
   background: linear-gradient(120deg,transparent 45px,rgba(60, 122, 169,1) 0) left;
   padding-right: 30px;
}

@media (max-width: 992px) {
   #navbar_top #navbarNav {
      background: #3c7aa9;
      padding-right: 0;
   }
}

.navbar-custom {
   background-color: #ffffff;
}
   /* change the link color */
   .navbar-custom .navbar-nav .nav-link {
      color: #ffffff;
      padding-right: 24px;
      padding-left: 24px;
   }

      .navbar-custom .navbar-nav .nav-link:focus,
      .navbar-custom .navbar-nav .nav-link:hover {
         color: #f6d346;
      }

#navbarNav ul {
   background-color: #3c7aa9;
   list-style-type: none;
}

*#navbarNav a {
   color: #ffffff;
}

#navbarNav a:hover,
#navbarNav a:focus {
   color: #f6d346;
   background-color: #3c7aa9;
}

#navbarNav ul li ul li.nav-item a {
   padding: 0.25rem 1.5rem;
}

/*#navbarNav ul li ul li.nav-item a.nav-link::after {
      display: inline-block;
      margin-left: 0.255em;
      vertical-align: 0.255em;
      content: "";
      border-top: 0.3em solid;
      border-right: 0.3em solid transparent;
      border-bottom: 0;
      border-left: 0.3em solid transparent;
   }*/

/*#navbarNav ul.dropdown-menu-2 {
   padding-left: 1rem;
}*/

@media screen and (max-width: 1144px) {
   .navbar-custom .navbar-nav .nav-link {
      padding-right: 1em;
      padding-left: 1em;
   }
}

/*@media (min-width: 992px) {
   .dropdown-menu .dropdown-toggle:after {
      border-top: .3em solid transparent;
      border-right: 0;
      border-bottom: .3em solid transparent;
      border-left: .3em solid;
   }

   .dropdown-menu .dropdown-menu {
      margin-left: 0;
      margin-right: 0;
   }

   .dropdown-menu li {
      position: relative;
   }
}*/

/* <- bootnavbar.css */
.dropdown-menu {
   margin-top: 0;
}

   .dropdown-menu .dropdown .dropdown-menu {
      /*left:100%;
    top: 0%;*/
      position: static;
      /*float: none;*/
      margin: 0;
      padding-left: 10px;
      border-width: 1px;
   }
/* bootnavbar.css -> */

.navbar-scroll.navbar-fixed-top {
   /*padding: 10px 0 10px 0;*/
   box-shadow: 0 18px 20px -12px rgba(0, 0, 0, 0.35);
}

.visible-small-block {
   display: none !important;
   border-top: 1px solid #ffffff;
}

.MenuQuery {
   display: none;
}

.font_size {
   border: 1px solid #c6cdcb;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   border-radius: 10px;
   margin-left: 5px;
   padding: 0 5px;
}

.SearchContainer {
   display: inline-block;
   position: absolute;
   right: 10px;
   bottom: 25px;
}

/*@media screen and (max-width: 767px) {*/
@media screen and (max-width: 992px) {
   .navbar-nav > li.MenuQuery {
      display: block;
      text-align: center;
      background-color: rgba(43,137,205,.85);
      padding: 7px 0;
   }

      .navbar-nav > li.MenuQuery input {
         margin-top: 20px;
      }

   .SearchContainer {
      display: none;
   }

   .visible-small-block {
      display: block !important;
   }
}

.navbar-nav .MenuQuery {
   display: none;
}


.header_logo {
   width: 260px;
   vertical-align: middle;
   z-index: 4;
   position: absolute;
   margin-top: 0;
}

   .header_logo a img {
      width: 100%;
      margin-left: 15%;
      margin-top: 15px;
      /*vertical-align: top;*/
   }

.navbar #panNbsp {
   width: 200px;
   height: 30px;
}

@media (max-width: 992px) {
   .header_logo a img {
      margin-left: 5px;
      margin-top: 5px;
   }
}

@media (max-width: 767.99px) {
   .header_logo a img {
      width: 95%;
   }
}

@media (max-width: 500px) {
   .header_logo a img {
      margin-left: 0;
   }

   .navbar #panNbsp {
      width: 240px;
      height: 50px;
   }
}

@media (max-width: 360px) {
   .header_logo {
      width: 190px;
   }

      .header_logo a img {
         margin-left: 0;
         margin-top: 0;
      }
}

.path {
   background-color: #DEEAEA;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 32px;
   padding-right: 32px;
}

   .path .separator {
      padding-left: 5px;
      padding-right: 5px;
   }

   .path a {
      color: #0C55AE;
   }

.frame {
   display: flex;
   margin-top: 15px;
}

   .frame .frame_title {
      border-bottom: 1px dotted black;
   }

      .frame .frame_title h2 {
         color: #3c7aa9;
         font-weight: bold;
         font-size: 140%;
      }

   .frame .mainContent {
      padding-left: 32px;
      padding-right: 32px;
   }
/* 左側 menu */
.ui-left-menu {
   padding-left: 0;
   padding-right: 0;
}

   .ui-left-menu ul {
      padding: 0 0 0 7px;
   }

   .ui-left-menu li {
      list-style-type: none;
      padding-left: 10px;
      background-color: #3c7aa9;
      padding: 10px 5px 5px 4px;
   }

      .ui-left-menu li a {
         color: #ffffff;
         text-decoration: none;
         margin-left: 25px;
      }


.ui-left-menu-title-1 {
   height: 55px;
   min-width: 170px;
}

.ui-left-menu-title-2 {
   width: 100%;
   height: 100%;
   padding-top: 6px;
   padding-left: 20px;
   font-size: 140%;
   color: #ffffff;
}

.ui-left-menu-title-3 {
   top: 0px;
   right: 0px;
   position: absolute;
}

/* 展開、收合 */
.ui-left-menu-open-close {
   padding: 0;
}

#imgLeftMenuOpenClose {
   margin-top: 5px;
   cursor: pointer;
}

.testenvironment {
   background-color: #c80001;
   color: white;
   font-weight: bold;
   text-align: center;
   font-size: 150%;
}

.announcement {
   background-color: #f6ca19;
   color: #333333;
   font-weight: bold;
}

.divFooterLine {
   border-bottom: 10px solid #939FA0;
}

footer {
   color: #ffffff;
}

.divFooter a {
   color: #ffffff;
   font-weight: bold;
}

#return-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: #f6ca19;
   border-color: rgba(246,202,25, 0.7);
   box-shadow: 0 5px 20px #f6ca19;
   width: 50px;
   height: 50px;
   text-decoration: none;
   display: none;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

   #return-to-top svg {
      color: #272727;
      position: relative;
      left: -6px;
      top: -3px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
   }

   #return-to-top:hover {
      background: rgba(246,202,25, 0.9);
   }

      #return-to-top:hover svg {
         color: #272727;
         top: -10px;
      }


/* RWD table----------------------------------------------------------------------*/
/* 無障礙(A11Y)------------------------------------------------------------ */
.GridviewCSS-A11Y {
   border: 0px;
   margin-bottom: 10px;
   margin-top: 10px;
}
   .GridviewCSS-A11Y caption {
      caption-side: top;
   }

   .GridviewCSS-A11Y th:first-child,
   .rwd-table td:first-child {
      padding-left: 0.2em;
   }

   .GridviewCSS-A11Y th:last-child,
   .GridviewCSS-A11Y td:last-child {
      padding-right: 0.2em;
   }

   .GridviewCSS-A11Y th,
   .GridviewCSS-A11Y td {
      padding: 0.6em 0.3em;
      border: 0px;
      min-height: 40px;
      border: 1px solid white;
   }

   .GridviewCSS-A11Y tbody th, .GridviewCSS-A11Y tbody td {
      border-bottom: 1px dotted #999999;
   }

   .GridviewCSS-A11Y tr {
      background-color: #fffcff;
   }

      .GridviewCSS-A11Y tr:nth-child(even) {
         background-color: #f2f2f2;
      }

      .GridviewCSS-A11Y tr:nth-child(odd) {
         background-color: #fffcff;
      }

      .GridviewCSS-A11Y tr:hover {
         background-color: #FFFFCC;
      }

   .GridviewCSS-A11Y thead th {
      border-top: 1px dotted #999999;
      border-bottom: 1px dotted #e4ebeb;
      font-weight: bold;
      background-color: #3c7aa9;
      text-align: center;
      color: #fff;
   }

   .GridviewCSS-A11Y tbody th {
      font-weight: normal;
      /*text-align: left;*/
   }

   .GridviewCSS-A11Y a {
      color: #000000;
      text-decoration: none;
   }

      .GridviewCSS-A11Y a:link {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS-A11Y a:visited {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS-A11Y a:active {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS-A11Y a:hover {
         color: #FF6600;
      }

   .GridviewCSS-A11Y table tr td span {
      border: thin solid #999999;
      background-color: #DDDDDD;
   }

   .GridviewCSS-A11Y table tr td a {
      border: thin solid #66CCFF;
      background-color: #CCFFFF;
   }

   /* 寬度大時置中對齊 */
   .GridviewCSS-A11Y .align-desktop-center {
      text-align: center;
   }

@media only screen and (max-width: 992px) {

   /* Force table to not be like tables anymore */
   .rwd-table-A11Y {
      background-color: transparent !important;
   }

      .rwd-table-A11Y,
      .rwd-table-A11Y thead,
      .rwd-table-A11Y tbody,
      .rwd-table-A11Y th,
      .rwd-table-A11Y td,
      .rwd-table-A11Y tr,
      .rwd-table-A11Y caption {
         display: block;
      }

         .rwd-table-A11Y thead th {
            display: none;
         }

         /* Hide table headers (but not display: none;, for accessibility) */
         .rwd-table-A11Y thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
         }

         .rwd-table-A11Y tr {
            border: 1px solid #ccc;
            margin-bottom: 15px;
            background-color: #ffffff;
         }

         .rwd-table-A11Y tbody td, .rwd-table-A11Y tbody th {
            /* Behave  like a "row" */
            border: none !important;
            border-bottom: 1px solid #eee !important;
            position: relative;
            padding-left: 40% !important;
            white-space: normal;
            text-align: left !important;
            min-height: 40px;
         }

            .rwd-table-A11Y tbody td:before, .rwd-table-A11Y tbody th:before {
               /* Now like a table header */
               position: absolute;
               /* Top/left values mimic padding */
               top: 6px;
               left: 6px;
               width: 40%;
               padding-right: 10px;
               white-space: nowrap;
               text-align: left;
               font-weight: bold;
               color: #1a1a1a;
            }

            .rwd-table-A11Y tbody td:before, .rwd-table-A11Y tbody th:before {
               content: attr(data-th);
            }

         .rwd-table-A11Y .align-desktop-center {
            text-align: left !important;
         }
}
/* ------------------------------------------------------------無障礙(A11Y) */

/* 不用無障礙------------------------------------------------------------ */
.GridviewCSS {
   border: 0px;
   margin-bottom: 10px;
   margin-top: 10px;
}

   .GridviewCSS th:first-child,
   .rwd-table td:first-child {
      padding-left: 0.2em;
   }

   .GridviewCSS th:last-child,
   .GridviewCSS td:last-child {
      padding-right: 0.2em;
   }

   .GridviewCSS th,
   .GridviewCSS td {
      padding: 0.6em 0.3em;
      border: 0px;
      min-height: 40px;
      border: 1px solid white;
   }

   .GridviewCSS td {
      border-bottom: 1px dotted #999999;
   }

   .GridviewCSS tr {
      background-color: #fffcff;
   }

      .GridviewCSS tr:nth-child(even) {
         background-color: #f2f2f2;
      }

      .GridviewCSS tr:nth-child(odd) {
         background-color: #fffcff;
      }

      .GridviewCSS tr:hover {
         background-color: #FFFFCC;
      }

   .GridviewCSS th {
      border-top: 1px dotted #999999;
      border-bottom: 1px dotted #e4ebeb;
      font-weight: bold;
      background-color: #3c7aa9;
      text-align: center;
      color: #fff;
   }

   .GridviewCSS a {
      color: #000000;
      text-decoration: none;
   }

      .GridviewCSS a:link {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS a:visited {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS a:active {
         color: #0C55AE;
         text-decoration: none;
      }

      .GridviewCSS a:hover {
         color: #FF6600;
      }


   .GridviewCSS table tr td span {
      border: thin solid #999999;
      background-color: #DDDDDD;
   }

   .GridviewCSS table tr td a {
      border: thin solid #66CCFF;
      background-color: #CCFFFF;
   }

@media only screen and (max-width: 992px) {

   /* Force table to not be like tables anymore */
   .rwd-table {
      background-color: transparent !important;
   }

      .rwd-table,
      .rwd-table thead,
      .rwd-table tbody,
      .rwd-table th,
      .rwd-table td,
      .rwd-table tr {
         display: block;
      }

         .rwd-table th {
            display: none;
         }

         /* Hide table headers (but not display: none;, for accessibility) */
         .rwd-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
         }

         .rwd-table tr {
            border: 1px solid #ccc;
            margin-bottom: 15px;
            background-color: #ffffff;
         }

         .rwd-table td {
            /* Behave  like a "row" */
            border: none !important;
            border-bottom: 1px solid #eee !important;
            position: relative;
            padding-left: 40% !important;
            white-space: normal;
            text-align: left;
            min-height: 40px;
         }

            .rwd-table td:before {
               /* Now like a table header */
               position: absolute;
               /* Top/left values mimic padding */
               top: 6px;
               left: 6px;
               width: 40%;
               padding-right: 10px;
               white-space: nowrap;
               text-align: left;
               font-weight: bold;
               color: #1a1a1a;
            }

            .rwd-table td:before {
               content: attr(data-th);
            }
}
/* ------------------------------------------------------------不用無障礙 */

.GridPager a,
.GridPager span {
   display: inline-block;
   padding: 0px 9px;
   margin-right: 4px;
   border-radius: 3px;
   border: solid 1px #c0c0c0;
   font-size: .875em;
   font-weight: bold;
   text-decoration: none;
   color: #717171;
   text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.GridPager a {
   background-color: #f5f5f5;
   color: #969696;
   border: 1px solid #969696;
}

.GridPager span {
   color: #f0f0f0;
   border: 1px solid #3AC0F2;
}

@media only screen and (max-width: 992px) {
   .GridPager table tbody tr {
      border: none !important;
   }

   .GridPager table tbody td {
      border-bottom: none !important;
   }

      .GridPager table tbody td:before {
         display: none;
      }

   .GridPager td {
      padding-left: 0 !important;
   }
}
/* ---------------------------------------------------------------------- RWD table */

.ui-hide {
   display: none;
   visibility: hidden;
}


/* #region button */
.ui-button {
   display: inline-block;
   border: 0;
   border-radius: 6px;
   background-color: #234e6e;
   box-shadow: 0 5px 15px -5px #234e6e;
   color: #ffffff;
   padding: 4px 10px 4px 10px;
}

   .ui-button:hover {
      background-color: #f6d346;
      color: #333333;
      text-decoration: inherit;
   }

   .ui-button:disabled {
      color: silver;
   }

.ui-button-green {
   background-color: #4d751f;
   box-shadow: 0 5px 15px -5px #4d751f;
}

.ui-button-pink {
   background-color: #C83767;
   box-shadow: 0 5px 15px -5px #C83767;
}

.ui-button-red {
   background-color: #d2322d;
   box-shadow: 0 5px 15px -5px #d2322d;
}

.ui-button-gray {
   background-color: #5a5a5a;
   box-shadow: 0 5px 15px -5px #5a5a5a;
}

.ui-button-a {
   color: #ffffff !important;
   text-decoration: none;
}

   .ui-button-a:hover {
      background-color: #f6d346 !important;
      color: #333333 !important;
      text-decoration: inherit;
   }

/* #endregion button */

/* #region text */
input[type="text"], input[type="password"], textarea,
.ui-text, .ui-text-readonly, .ui-text-int, .ui-text-left-int, .ui-text-cdate, .ui-text-zip, .ui-text-upper, .ui-text-numeric, .ui-text-alphanumeric, .ui-text-organ, .ui-text-idno, .ui-text-cdate, .ui-text-money, .ui-text-decimal {
   margin-top: 3px;
   margin-bottom: 3px;
   color: #666666;
   padding-right: 3px;
   padding-left: 3px;
   padding-top: 2px;
   padding-bottom: 2px;
   border: 1px solid #3c7aa9;
   letter-spacing: 0.0836em;
   word-spacing: 0.0836em;
   background-color: #e0ebec;
}

.ui-text-upper {
   text-transform: uppercase;
}

.ui-text-zip {
   text-align: left !important;
}

.ui-text-int {
   text-align: right !important;
}

.ui-text-left-int {
   text-align: left !important;
}

.ui-text-cdate {
   text-align: left !important;
}

.ui-text-money {
   text-align: right !important;
}

.ui-text-decimal {
   text-align: right !important;
}

.ui-text-year, .ui-text-month {
   text-align: center !important;
}

.ui-text-readonly {
   border: 0px solid #999999 !important;
   background-color: white !important;
   border-bottom: 1px solid #999999 !important;
}

.ui-text-center {
   text-align: center !important;
}

.ui-text-Locked {
   background-color: #dcdcdc !important;
}
/*#endregion text */

/*#region select */
.ui-select {
   color: #666666;
   border: 1px solid #3c7aa9;
   letter-spacing: 0.0836em;
   word-spacing: 0.0836em;
   background-color: #e0ebec;
}


/*#endregion select */

/* #region radio */
.radio_list label {
   font-weight: normal;
   margin-top: 10px;
   margin-right: 10px;
   line-height: 1em;
}

.radio_list input:disabled + label {
   color: silver;
}


/* #endregion radio */

/*#region checkbox */
input[type="checkbox"] {
   vertical-align: middle;
}

/*#endregion checkbox */

.divFormType {
   margin: 10px 0;
}

.ui-label-title {
   color: #0a283f;
   font-weight: bold;
   top: 0px;
   left: 0px;
}

.ui-title-orange {
   color: #FF6600;
   font-weight: bold;
}

.ui-span-star {
   color: red;
}


.line001 {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #DDDDDD;
}

.line002 {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #3570BE;
}

.ui-label-update {
   color: #444444;
   font-size: 90%;
}

.FormTitle {
   margin: 1px 0;
   padding: 20px 20px 0 10px;
   color: #FF6600;
   font-weight: bold;
}

h3.FormTitle {
   font-size: 110%;
}

.FormFunction {
   padding: 10px;
}


.FormCommand {
   padding: 20px 20px;
}

@media print {

   * {
      -webkit-print-color-adjust: exact;
      color: #000000 !important;
   }

   body *:focus {
      outline: none !important;
      outline-offset: -2px !important;
      opacity: 1 !important;
   }

   a[href]:after {
      content: none !important;
   }

   .divTopMenu {
      display: none;
   }

   #navbar_top {
      display: none;
   }

   .announcement ol {
      display: none;
   }

   #divLeftMenu {
      display: none;
   }

      #divLeftMenu ul {
         display: none;
      }

      #divLeftMenu img {
         display: none;
      }

   #divLeftMenuOpenClose {
      display: none;
   }

      #divLeftMenuOpenClose #imgLeftMenuOpenClose {
         display: none;
      }

   .frame_community img {
      display: none;
   }

   footer {
      display: none;
   }

   #return-to-top {
      display: none;
   }

      #return-to-top svg {
         display: none;
      }

   .path, .GridviewCSS th, .ui-button {
      background-color: transparent;
      color: #333333;
   }
}