/* 主題顏色 變數 */
:root {
  --theme-color: #ff7b00;
  --theme-color2: #ffa256;
  --theme-label-color: #ffe0c1;
  --shadow-color: #ffe0c17c;
  --theme-nav-tabs-link-active-border-color: var(--theme-color)
    var(--theme-color) #fff var(--theme-color);
  --theme-nav-tabs-link-default-border-color: var(--theme-color2)
    var(--theme-color2) #fff var(--theme-color2);
  --theme-nav-tabs-link-hover-border-color: #ff9c3f #ff9c3f #f6f9ff;
}

/* ----- */

fieldset,
fieldset legend {
  -moz-box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
  -webkit-box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
}
body {
  letter-spacing: 1pt;
  font-family: Arial, 微軟正黑體;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.point:hover {
  cursor: pointer;
}
fieldset {
  position: relative;
  border: 1px solid var(--theme-color) !important;
  border-radius: 10px;
  margin: 5px 0;
  text-align: left !important;
  box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
}
fieldset legend {
  position: absolute;
  width: auto;
  color: #fff;
  padding: 3px 10px;
  border: 1px solid var(--theme-color);
  border-radius: 15px;
  font-size: 11pt;
  margin: 5px 0 0;
  background-color: var(--theme-color);
  text-align: center;
  box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
}
.FormTable,
.ListTable {
  width: 100%;
  border-style: solid;
  border-width: 0;
}
.FormTable {
  margin: 30px 0 5px;
}
.FormTable label {
  margin: 0;
}
.FormTable .control-label {
  font-weight: bolder;
  text-align: center;
  background-color: var(--theme-label-color);
  color: #000;
  padding-top: 0;
  border-radius: 5px;
  height: fit-content;
}
.FormTable .form-group > .row {
  margin-bottom: 0;
}
.FormTable .form-group > .row > div:not(.control-label) {
  text-align: left;
  margin-bottom: 6px;
}
.FormTable .form-group > .row > div,
.FormTable .form-group > .row > label {
  min-height: 35px;
  line-height: 35px;
  margin-bottom: 5px;
}
.ListTable {
  display: table;
  margin: 10px 0 5px;
}
.ListTable .tbody > div > div,
.ListTable .thead > div > div {
  vertical-align: middle;
  border: 1px solid #dadada;
  padding: 5px;
}
.ListTable .thead {
  display: table-header-group;
}
.ListTable .thead > div {
  display: table-row;
}
.ListTable .thead > div > div {
  display: table-cell;
  text-align: center;
  background-color: var(--theme-color);
  color: #fff;
  height: 20px;
}
.ListTable .tbody {
  display: table-row-group;
}
.ListTable .tbody > div {
  display: table-row;
  transition: 0.25s all;
}
.ListTable .tbody > div > div {
  display: table-cell;
  text-align: left;
}
.ListTable .tbody > div .text-number {
  text-align: right;
}
.ListTable .tbody > div .ItemEdit,
.ListTable .tbody > div .text-chk {
  text-align: center;
}
.ListTable .tbody > div:nth-child(even) {
  background-color: #dcf1ef;
}
.ListTable .tbody > div:hover,
.ListTable .tbody > div:nth-child(even):hover {
  background-color: var(--theme-color2);
  cursor: pointer;
}
.GirdViewShell,
.GirdViewShell > div {
  overflow-x: auto;
}
.GirdViewShell .GridViewStyle {
  width: 100% !important;
  border: none !important;
  margin: 5px 0 10px !important;
}
.GirdViewShell .GridViewStyle .GridViewHeaderStyle,
.GirdViewShell .GridViewStyle tr:nth-child(1) {
  font-family: Arial, 微軟正黑體 !important;
}
.GirdViewShell .GridViewStyle .GridViewHeaderStyle > td,
.GirdViewShell .GridViewStyle .GridViewHeaderStyle > th,
.GirdViewShell .GridViewStyle tr:nth-child(1) > td,
.GirdViewShell .GridViewStyle tr:nth-child(1) > th {
  font-size: 14px !important;
  padding: 5px;
  text-align: center !important;
  vertical-align: middle !important;
  background-color: var(--theme-color);
  color: #fff;
  height: 20px !important;
  border: 1px solid #dadada;
  text-shadow: none !important;
  font-weight: 400 !important;
}
.GirdViewShell .GridViewStyle .GridViewHeaderStyle > td a,
.GirdViewShell .GridViewStyle .GridViewHeaderStyle > th a,
.GirdViewShell .GridViewStyle tr:nth-child(1) > td a,
.GirdViewShell .GridViewStyle tr:nth-child(1) > th a {
  color: #fff;
}
.GirdViewShell .GridViewStyle .GridViewAlternatingRowStyle,
.GirdViewShell .GridViewStyle .GridViewRowStyle,
.GirdViewShell .GridViewStyle tr:not(:nth-child(1)) {
  transition: 0.25s all !important;
  font-size: 14px !important;
  font-family: Arial, 微軟正黑體 !important;
  text-align: left;
}
.GirdViewShell .GridViewStyle .GridViewAlternatingRowStyle:hover,
.GirdViewShell .GridViewStyle .GridViewRowStyle:hover,
.GirdViewShell .GridViewStyle tr:not(:nth-child(1)):hover {
  background-color: var(--theme-color2);
}
.GirdViewShell .GridViewStyle .GridViewAlternatingRowStyle td,
.GirdViewShell .GridViewStyle .GridViewRowStyle td,
.GirdViewShell .GridViewStyle tr:not(:nth-child(1)) td {
  padding: 5px;
  vertical-align: middle !important;
  border: 1px solid #dadada;
}
.GirdViewShell .GridViewStyle .GridViewRowStyle,
.GirdViewShell .GridViewStyle tr:nth-child(even):not(.GridViewPagerStyle) {
  background-color: #fff;
}
.GirdViewShell .GridViewStyle .GridViewAlternatingRowStyle,
.GirdViewShell .GridViewStyle tr:nth-child(odd):not(.GridViewPagerStyle) {
  background-color: var(--shadow-color);
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle {
  background: var(--theme-color2);
  font-weight: 700 !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle .floatLeft {
  float: left !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle .floatRight {
  float: right !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle td {
  border: 1px solid #dadada;
  padding: 5px;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle input,
.GirdViewShell .GridViewStyle .GridViewPagerStyle label,
.GirdViewShell .GridViewStyle .GridViewPagerStyle span {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle input[type="image"] {
  height: 15px !important;
  margin: 0 2px !important;
  background-color: #fff !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle label,
.GirdViewShell .GridViewStyle .GridViewPagerStyle span {
  color: #fff !important;
}
.GirdViewShell .GridViewStyle .GridViewPagerStyle input[type="text"],
.GirdViewShell .GridViewStyle .GridViewPagerStyle select {
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  height: 20px !important;
}
.GirdViewShell ul {
  margin-bottom: 0;
}
.panel.panel-primary {
  border-color: var(--theme-color);
}
.panel.panel-primary > .panel-heading {
  background-image: linear-gradient(
    to bottom,
    var(--theme-color2) 0,
    var(--theme-color) 100%
  );
  border-color: var(--theme-color);
}
@media (max-width: 991px) {
  .ListTable .thead {
    display: none;
  }
  .ListTable .tbody > div {
    display: flow-root;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    position: relative;
  }
  .ListTable .tbody > div > div {
    float: left;
    width: 48%;
    border: none;
  }
  .ListTable .tbody > div .text-number {
    text-align: left;
  }
  .ListTable .tbody > div .text-chk {
    display: none;
  }
  .ListTable .tbody > div .ItemEdit {
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .FormTable .control-label {
    text-align: left;
    background-color: inherit;
    height: auto;
    border: none;
    padding: 0;
    color: var(--theme-color);
  }
  .FormTable .form-group > div,
  .FormTable .form-group > label {
    min-height: 24px;
    line-height: 24px;
  }
  .FormTable .form-group > .row > div:not(.control-label) {
    margin-bottom: 10px;
  }
  .FormTable .address input:nth-child(1),
  .FormTable .address select {
    display: inline;
  }
  .ListTable .tbody > div > div {
    float: none;
    display: block;
    width: 100%;
  }
}
.Msg_Type {
  font-weight: 400;
  font-size: 10pt;
  color: #009;
}
.Mark_Type {
  font-weight: 400;
  color: red;
}
select {
  color: #000c52;
  text-decoration: none;
  line-height: 18px;
}

/* button */
.btn.btn-default {
  display: flex;
  background-color: var(--theme-color2);
  color: white;
  font-weight: 700;
  margin: 10px 0;
  border: var(--theme-color) 2px solid;
  border-radius: 10px;
  box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  align-items: center;
}

.btn-default:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(51, 51, 102, 0.5);
  background-color: var(--theme-color2) !important;
  color: white !important;
  border: var(--theme-color) 2px solid !important;
}

.btn-default:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  background-color: var(--theme-color2) !important;
  color: white !important;
  border: var(--theme-color) 2px solid !important;
}

.btn.btn-delete {
  display: flex;
  background-color: #ff4242;
  color: white;
  font-weight: 700;
  margin: 10px 0;
  border: #780606 2px solid;
  border-radius: 10px;
  /* padding: 0.5rem; */
  box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-delete:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 10px rgba(51, 51, 102, 0.5);
}

.btn-delete:active {
  transform: scale(0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background-color: #ff4242 !important;
  color: white !important;
  border: #780606 2px solid !important;
}

.btn.btn-edit {
  display: flex;
  background-color: #008cff;
  color: white;
  font-weight: 700;
  margin: 10px 0;
  border: #063b67 2px solid;
  border-radius: 10px;
  /* padding: 0.5rem; */
  box-shadow: 2px 2px 6px -1px rgba(51, 51, 102, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-edit:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 10px rgba(51, 51, 102, 0.5);
}

.btn-edit:active {
  transform: scale(0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background-color: #008cff !important;
  color: white !important;
  border: #063b67 2px solid !important;
}

.form-group .btn.btn-default {
  margin: 0;
}
.pagination li > a,
.pagination li > a:hover {
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
}
.pagination .active a,
.pagination .active a:hover {
  border-color: var(--theme-color);
  background-color: var(--theme-color);
}

.tab-content {
  /* border: 1px solid var(--theme-color); */
  margin-bottom: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: var(--theme-color2);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: var(--theme-color);
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: var(--theme-color);
  border-bottom: 2px solid var(--theme-color);
}

/* nav-tabs */
.nav-tabs {
  border-color: var(--theme-color);
}

.nav-tabs .nav-link {
  border-color: var(--theme-nav-tabs-link-default-border-color) !important;
  color: #fff;
  background-color: var(--theme-color);
}

.nav-tabs .nav-link:hover {
  background-color: var(--theme-color2);
  border-color: var(--theme-nav-tabs-link-hover-border-color);
}

.nav-tabs .nav-link.active {
  font-weight: 700;
  color: var(--theme-color);
  background-color: #fff !important;
  border-color: var(--theme-nav-tabs-link-active-border-color);
}

.ajax__calendar {
  line-height: initial;
  height: initial;
}
.ajax__calendar .ajax__calendar_body,
.ajax__calendar .ajax__calendar_days,
.ajax__calendar .ajax__calendar_months,
.ajax__calendar .ajax__calendar_years {
  width: 160px;
}
.ajax__calendar .ajax__calendar_body table,
.ajax__calendar .ajax__calendar_days table,
.ajax__calendar .ajax__calendar_months table,
.ajax__calendar .ajax__calendar_years table {
  background: 0 0 !important;
  border: 1px solid #ccc !important;
}
.ajax__calendar .ajax__calendar_body table tr,
.ajax__calendar .ajax__calendar_days table tr,
.ajax__calendar .ajax__calendar_months table tr,
.ajax__calendar .ajax__calendar_years table tr {
  background: 0 0 !important;
}
.ajax__calendar .ajax__calendar_body table tr td,
.ajax__calendar .ajax__calendar_days table tr td,
.ajax__calendar .ajax__calendar_months table tr td,
.ajax__calendar .ajax__calendar_years table tr td {
  padding: 0 !important;
  background: 0 0 !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
}
.ajax__calendar .ajax__calendar_body table thead tr,
.ajax__calendar .ajax__calendar_days table thead tr,
.ajax__calendar .ajax__calendar_months table thead tr,
.ajax__calendar .ajax__calendar_years table thead tr {
  background-color: #0b4868 !important;
}
.ajax__calendar .ajax__calendar_body table thead tr td,
.ajax__calendar .ajax__calendar_days table thead tr td,
.ajax__calendar .ajax__calendar_months table thead tr td,
.ajax__calendar .ajax__calendar_years table thead tr td {
  color: #fff !important;
}
.ajax__calendar .ajax__calendar_body table thead tr td div,
.ajax__calendar .ajax__calendar_days table thead tr td div,
.ajax__calendar .ajax__calendar_months table thead tr td div,
.ajax__calendar .ajax__calendar_years table thead tr td div {
  font-size: 12px !important;
  line-height: 17px;
}
.ajax__calendar .ajax__calendar_days div {
  width: 20px !important;
  height: 18px !important;
}
.ajax__calendar .ajax__calendar_months div,
.ajax__calendar .ajax__calendar_years div {
  width: 35px !important;
  height: 45px !important;
}
.joinList > div {
  margin-bottom: 0;
}
.modal-footer .btn + .btn {
  margin: 10px 0;
}
.form-inline .form-control {
  display: initial;
}

/* radio btn */
.form-check .form-check-input {
  margin-left: 1rem !important;
  margin-top: 0 !important;
  font-size: large;
}

.form-check-input:checked {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color2) !important;
}

.form-check {
  padding: 0;
  display: flex !important;
  align-items: center;
}

.form-check-label {
  padding: 0;
}

.motion_Circle {
  animation: m_Circle 2s infinite;
  -webkit-animation: m_Circle 2s infinite;
}

@keyframes m_Circle {
  0% {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  50% {
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

/* grid */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 3px;
  align-items: center;
}

.gridItem {
  display: flex;
  align-items: center;
  gap: 15px;
}

.gridItem_half {
  display: flex;
  align-items: center;
  grid-column: 1/1.5;
  gap: 15px;
}

/* input-group */
.input-group-text {
  line-height: 1.3;
}

.input-group > form-control {
  padding: 0;
}

/* form-control */
.form-control:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 12px 4px var(--shadow-color) !important;
}

.form-select:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 12px 4px var(--shadow-color) !important; /* 光暈效果 */
}