@charset "UTF-8";
/*---------------------------*/
/*Color*/
/*---------------------------*/
/*---------------------------*/
/*textarea*/
/*---------------------------*/
textarea {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 390px;
  min-height: 142px;
  height: 142px;
  padding: 12px;
}

/*---------------------------*/
/*textarea*/
/*---------------------------*/
@font-face {
  font-family: "Noto Sans TC";
  /*這個相當於給字型起個名字，比如“微軟雅黑”*/
  src: url("/fonts/NotoSansTC-Medium.otf");
  /*指定字型的路徑*/
}
@font-face {
  font-family: "Noto Sans TC Regular";
  /*這個相當於給字型起個名字，比如“微軟雅黑”*/
  src: url("/fonts/NotoSansTC-Regular.otf");
  /*指定字型的路徑*/
}
/*---------------------------*/
/*字體、字體顏色*/
/*---------------------------*/
body {
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 0.09em;
  font-size: 16px;
  color: #505050;
}

button {
  font-size: 1.2em !important;
  font-weight: 500;
}
button:focus-visible {
  outline: none !important;
}
button:focus {
  outline: none !important;
}

th, td {
  font-weight: 500 !important;
}

label, a, p {
  font-weight: 500;
}

/*label{
    margin-bottom: 0px;
}*/
h1 {
  color: #F36F1F;
  font-size: 1.375em;
  font-weight: 500 !important;
  margin: 0;
  margin-left: 22px;
  margin-right: 22px;
}

h2 {
  font-size: 2.25em;
  font-weight: 500 !important;
}

h3 {
  font-size: 1.75em;
  font-weight: 500 !important;
}

h4 {
  font-weight: 700px !important;
  font-size: 1.25em;
  font-weight: 500 !important;
}

.system_text {
  color: #7E7E7E;
  font-size: 1em;
  font-family: "Noto Sans TC Regular";
  vertical-align: middle;
  margin: 0 10px;
  bottom: 0px;
  left: 250px;
  position: unset;
  letter-spacing: 2px;
}
.system_text i {
  font-size: 0.9em;
  margin: 0 1em;
  color: #7E7E7E;
}
.system_text a {
  color: #7E7E7E;
}
.system_text a:hover {
  color: #F36F1F;
}
.system_text img {
  width: 6px;
  height: 11px;
}

.icon {
  font-size: 1.625em;
  display: block;
  float: left;
  color: #F36F1F;
}

.container-fluid {
  padding-left: 3.6vw;
  padding-right: 61px;
}

@media (max-width: 1550px) {
  .container-fluid {
    padding: 0 2.6vw;
  }
}
#EmpEdit label {
  font-size: 1.25em !important;
}

.field-validation-error {
  font-size: 1.4em;
}

.form-group label {
  font-size: 1.25em;
}

/*---------------------------*/
/*標籤禁用*/
/*---------------------------*/
/*a {
    cursor: default;
}*/
/*---------------------------*/
/*flex*/
/*---------------------------*/
.flex {
  display: flex;
}

/*---------------------------*/
/*select 箭頭*/
/*---------------------------*/
/*.custom-select {*/
/*移除箭頭樣式*/
/*appearance: none;
-moz-appearance: none;
-webkit-appearance: none;*/
/*改變右邊箭頭樣式*/
/*background: url("../images/icon/Vector-down.png") no-repeat right center transparent;
    background-position: 86%;
    background-size: 20px 10px;
    border: 1px solid;
    width: 100%;
    height: 34px;
    padding-left: 18px;
    padding-right: 40px;
    background-color: white;
    color: gray;
    font-size: 20px;

    &:focus {
        border-color: $color-primary-action !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
}*/
/*---------------------------*/
/*font相關*/
/*---------------------------*/
.font-28 {
  font-size: 28px !important;
}

.font-26 {
  font-size: 26px !important;
}

.font-24 {
  font-size: 24px !important;
}

.font-20 {
  font-size: 20px !important;
}

/*---------------------------*/
/*input相關*/
/*---------------------------*/
.form-control:focus {
  color: #505050 !important;
  border-color: #F36F1F !important;
  outline: 0;
  box-shadow: none !important;
}

input, select {
  border: 1.5px solid #A4A4A4;
  border-radius: 5px;
  font-size: 20px;
  color: #505050;
}

input {
  padding: 5px 20px;
}

select {
  padding: 5px 17px;
}

@media (max-width: 1600px) {
  input {
    padding: 5px 15px;
  }

  select {
    padding: 5px 12px;
  }
}
.input-74 {
  width: 74px !important;
}

.input-106 {
  width: 106px !important;
}

.input-168 {
  width: 168px !important;
}

.input-190 {
  width: 190px !important;
}

.input-216 {
  width: 216px !important;
}

.input-481 {
  width: 21.7vw !important;
}

.form-group {
  display: flex;
  align-items: center;
}

input {
  height: 41px;
  border: 1.5px solid #A4A4A4;
}

input:focus-visible, select:focus-visible {
  outline: none;
  border-color: #F36F1F;
}

input::placeholder {
  color: #C4C4C4;
  font-size: 1em;
}

input[type=date]:invalid::-webkit-datetime-edit {
  color: #C4C4C4;
}

/*---------------------------*/
/*input - radio btn*/
/*---------------------------*/
.back_btn {
  background-color: #F36F1F;
  color: #fff;
  border: none;
  border-radius: 5px;
  width: 155px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}
.back_btn:hover {
  background-color: #f36f1f8a;
}

input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 3px;
  background-clip: content-box;
  border: 2px solid #505050;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type=radio]:checked {
  background-color: #F36F1F;
  border: 2px solid #F36F1F;
}

.table input[type=radio] {
  position: relative !important;
  top: 3px !important;
}

/*---------------------------*/
/*input - checkbox*/
/*---------------------------*/
input[type=checkbox] {
  /*  display: none;*/
}

/*---------------------------*/
/*button*/
/*---------------------------*/
button {
  border-radius: 5px;
}

.btn_create {
  display: block;
  position: absolute;
  margin-top: 16px;
  width: 155px;
  height: 40px;
  border-radius: 5px;
  background-color: #F36F1F;
  border: 0;
  z-index: 1;
  color: white;
  font-size: 20px;
}
.btn_create:hover {
  background-color: #f36f1f8a;
}
.btn_create:focus-visible {
  outline: none;
}
.btn_create a {
  color: white;
}
.btn_create u {
  color: white;
  text-decoration: none;
}

.submit_button {
  border: none;
  background-color: #F36F1F;
  color: #fff;
  width: 155px !important;
  font-weight: blod;
}
.submit_button:hover {
  opacity: 55%;
}

.btn_create a {
  display: block;
}

/*---------------------------*/
/*datatable*/
/*---------------------------*/
/*帳號管理、活動查詢、活動歷程datatable*/
/*table {
    color: $color-black !important;
    font-size: 18px;*/
/*    label {
        $color-black
        !important;
    }*/
/*}*/
/*datatable 頁數查詢及搜尋框統一設定*/
div.dataTables_wrapper div.dataTables_length label {
  display: flex;
  align-items: center;
}
div.dataTables_wrapper div.dataTables_length label select {
  font-size: 18px;
}

div.dataTables_wrapper div.dataTables_filter label {
  display: flex;
  align-items: center;
}
div.dataTables_wrapper div.dataTables_filter label input {
  font-size: 18px;
}

#dtAuth {
  table-layout: fixed;
}

#dtActivityLog td {
  /*font-size: 1.15em !important;*/
}

#dtEmp, #dtEmp th, #dtEmp td,
#dtActivityLog, #dtActivityLog th, #dtActivityLog td,
#dtActivity, #dtActivity th, #dtActivity td {
  border: 0;
  word-break: break-word;
}

#dtEmp_wrapper, #dtTable_wrapper {
  margin-top: 20px;
  margin-bottom: 60px;
}

#dtEmp_wrapper {
  margin-top: 20px;
}

#dtActivity_wrapper {
  margin-top: 53px;
}

#dtActivity td {
  /*font-size: 1.05em !important;*/
}

#dtEmp, #dtActivityLog, #dtActivity {
  border-collapse: separate;
  border-spacing: 0px 10px;
  overflow: auto;
  display: block;
}
#dtEmp td, #dtActivityLog td, #dtActivity td {
  background-color: #F5F5F5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  /*font-size: 0.75em;*/
}
#dtEmp th, #dtActivityLog th, #dtActivity th {
  text-align: center;
  vertical-align: middle;
  /*font-size: 1.25em;*/
}
#dtEmp tr, #dtActivityLog tr, #dtActivity tr {
  font-size: 1.125em;
  height: 55px;
}
#dtEmp .fas, #dtActivityLog .fas, #dtActivity .fas {
  font-size: 1.125em;
  color: #505050;
}

@media (max-width: 1600px) {
  #dtEmp tr, #dtActivityLog tr, #dtActivity tr {
    font-size: 1em;
    height: 45px;
  }
  #dtEmp .fas, #dtActivityLog .fas, #dtActivity .fas {
    font-size: 1em;
  }
}
/*新增活動datatable*/
table tr {
  font-size: 18px;
}

#dtAuth, #dtDate, #dtDate th, #dtDate td,
#dtTime, #dtTime th, #dtTime td,
#dtEmail, #dtEmail th, #dtEmail td,
#table, #table th, #table td,
#dtTable, #dtTable th, #dtTable td,
#dtTag, #dtTag th, #dtTag td {
  border: 0px;
}

#dtAuth, #dtDate, #dtTime, #dtEmail, #table, #dtTable, #dtTag, #dtImportCard, #dtElecCard, #dtICashBindBank, #dtICashMerchantExcept, #dtICashMerchantSpecify, #dtICashMerchantExcept,
#dtICPBindBank, #dtICPMerchantSpecify, #dtICPMerchantExcept, #dtRedeem, #dtAccumulativePoint, #dtDiffPoint {
  border-collapse: separate;
  border-spacing: 0px 10px;
  border: 0px;
}
#dtAuth td, #dtDate td, #dtTime td, #dtEmail td, #table td, #dtTable td, #dtTag td, #dtImportCard td, #dtElecCard td, #dtICashBindBank td, #dtICashMerchantExcept td, #dtICashMerchantSpecify td, #dtICashMerchantExcept td,
#dtICPBindBank td, #dtICPMerchantSpecify td, #dtICPMerchantExcept td, #dtRedeem td, #dtAccumulativePoint td, #dtDiffPoint td {
  background-color: #F5F5F5;
  text-align: center;
  vertical-align: middle;
  border: 0px;
}
#dtAuth th, #dtDate th, #dtTime th, #dtEmail th, #table th, #dtTable th, #dtTag th, #dtImportCard th, #dtElecCard th, #dtICashBindBank th, #dtICashMerchantExcept th, #dtICashMerchantSpecify th, #dtICashMerchantExcept th,
#dtICPBindBank th, #dtICPMerchantSpecify th, #dtICPMerchantExcept th, #dtRedeem th, #dtAccumulativePoint th, #dtDiffPoint th {
  text-align: center;
  vertical-align: middle;
  border: none;
}
#dtAuth tr, #dtDate tr, #dtTime tr, #dtEmail tr, #table tr, #dtTable tr, #dtTag tr, #dtImportCard tr, #dtElecCard tr, #dtICashBindBank tr, #dtICashMerchantExcept tr, #dtICashMerchantSpecify tr, #dtICashMerchantExcept tr,
#dtICPBindBank tr, #dtICPMerchantSpecify tr, #dtICPMerchantExcept tr, #dtRedeem tr, #dtAccumulativePoint tr, #dtDiffPoint tr {
  font-size: 1.125em;
  height: 55px;
}
#dtAuth .fas, #dtDate .fas, #dtTime .fas, #dtEmail .fas, #table .fas, #dtTable .fas, #dtTag .fas, #dtImportCard .fas, #dtElecCard .fas, #dtICashBindBank .fas, #dtICashMerchantExcept .fas, #dtICashMerchantSpecify .fas, #dtICashMerchantExcept .fas,
#dtICPBindBank .fas, #dtICPMerchantSpecify .fas, #dtICPMerchantExcept .fas, #dtRedeem .fas, #dtAccumulativePoint .fas, #dtDiffPoint .fas {
  font-size: 1.125em;
}

@media (max-width: 1600px) {
  #dtAuth tr, #dtDate tr, #dtTime tr, #dtEmail tr, #table tr, #dtTable tr, #dtTag tr, #dtImportCard tr, #dtElecCard tr, #dtICashBindBank tr, #dtICashMerchantExcept tr, #dtICashMerchantSpecify tr, #dtICashMerchantExcept tr,
#dtICPBindBank tr, #dtICPMerchantSpecify tr, #dtICPMerchantExcept tr, #dtRedeem tr, #dtAccumulativePoint tr, #dtDiffPoint tr {
    font-size: 1em;
    height: 45px;
  }
}
.dataTables_filter input {
  width: 280px !important;
  height: 48px;
  margin-left: 20px !important;
  border-radius: 6px;
}
.dataTables_filter label {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 20px;
}

.pagination {
  width: 270px;
}
.pagination li {
  padding: 0 !important;
}

.paginate_button {
  margin: 0 1.6em;
}
.paginate_button:hover {
  border: 0px !important;
  background: none !important;
}
.paginate_button:active {
  background: unset;
  border: 0;
  box-shadow: unset;
}
.paginate_button a {
  border: 0;
}

.active .page-link {
  color: white !important;
  background-color: #F36F1F !important;
}

.container-fluid {
  margin-top: 52px !important;
  padding-left: 3.6vw;
  padding-right: 3.6vw;
}

@media (max-width: 1550px) {
  .container-fluid {
    margin-top: 40px !important;
    padding: 0 2.6vw;
  }
}
.page-item :hover {
  background-color: unset !important;
  background: unset !important;
  outline: none !important;
  border: unset !important;
}
.page-item a:focus-visible {
  outline: none;
}
.page-item .active .page-link {
  color: #000;
  background-color: unset;
  border-color: unset;
}

.page-link {
  color: #F36F1F !important;
}
.page-link:hover {
  color: white !important;
  background-color: #F36F1F !important;
  border: 0px !important;
}
.page-link:focus {
  box-shadow: none;
}

td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 10px solid #7E7E7E !important;
}

select.custom-select.custom-select-sm.form-control.form-control-sm {
  width: 129px;
  height: 41px;
  margin-left: 9px;
}

a.fas {
  color: #505050 !important;
}

/*.user-icon {
    font-size: 40px;
    display: block;
    float: left;
    color: $color-primary-action;
}*/
.status_blue {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 10px solid #22B8BC !important;
}

.status_orange {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 10px solid #F36F1F !important;
}

.status_grey {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 10px solid #7E7E7E !important;
}

.dataTables_filter label, .dataTables_length label {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.25em;
  color: #505050 !important;
}
.dataTables_filter input, .dataTables_length input {
  width: 280px !important;
  height: 41px;
  margin-left: 20px !important;
}

@media (max-width: 1600px) {
  .dataTables_filter label, .dataTables_length label {
    font-size: 1em;
  }
}
/*---------------------------*/
/*頁籤*/
/*---------------------------*/
.tab-demo {
  margin: 26px 0;
}

.tab-demo > ul {
  position: relative;
  display: block;
  width: 196px;
  margin: 0;
  list-style: none;
  z-index: 4;
}

.tab-demo > .double-ul {
  width: 400px !important;
}

.tab-demo > ul > li {
  display: inline-block;
  vertical-align: top;
  margin: 0px -1px -1px 0px;
  width: 195px;
  height: 56px;
  font-family: "微軟正黑體";
  line-height: 60px;
  background: #cdcdcd;
  padding: 0 15px;
  list-style: none;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #fff;
  background: white;
  box-shadow: -7px -8px 16px rgba(0, 0, 0, 0.08);
  border-radius: 15px 15px 0px 0px;
}

.tab-demo > ul > li a {
  position: relative;
  display: inline;
  box-sizing: border-box;
  color: #505050;
  text-decoration: none;
  line-height: 58px;
  font-size: 1.375em;
}

.tab-demo > .tab-inner {
  width: 100%;
  background: #FFFFFF;
  border-radius: 0px 15px 15px 15px;
  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.16));
  padding: 60px 60px 60px 60px;
}

.tab-title {
  list-style: none;
  padding-left: 0px;
}

.tab-inner {
  padding: 3.1vw 4.6vw;
}

.platform_save {
  padding-left: 60px;
}

/*---------------------------*/
/*--------scroll style-------*/
/*----class="scroll-style"---*/
/*---------------------------*/
.scroll-style::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 10px;
}

.scroll-style::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  background-color: #ffffff;
}

.scroll-style::-webkit-scrollbar-thumb {
  background-color: #e2e2e2;
  border-radius: 10px;
}

/*---------------------------*/
/*icon*/
/*---------------------------*/
.sb-nav-link-icon {
  text-align: center;
}

.icon {
  font-size: 1.25em;
  display: block;
  float: left;
  color: #F36F1F;
  width: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 20px;
  height: 20px;
}

.div_title {
  height: 44px;
  position: relative;
  display: flex;
  align-items: baseline;
}

/*左選單、標題icon*/
.icon-home {
  background-image: url("../images/icon/icon-home.svg");
}

.icon-home-gray {
  background-image: url("../images/icon/icon-home-gray.svg");
}

.icon-user {
  background-image: url("../images/icon/icon-user.svg");
}

.icon-user-gray {
  background-image: url("../images/icon/icon-user-gray.svg");
}

.icon-role {
  background-image: url("../images/icon/icon-role.svg");
}

.icon-role-gray {
  background-image: url("../images/icon/icon-role-gray.svg");
}

.icon-calendar {
  background-image: url("../images/icon/icon-calendar.svg");
}

.icon-calendar-gray {
  background-image: url("../images/icon/icon-calendar-gray.svg");
}

.icon-list {
  background-image: url("../images/icon/icon-list.svg");
}

.icon-list-gray {
  background-image: url("../images/icon/icon-list-gray.svg");
}

.icon-group {
  background-image: url("../images/icon/icon-group.svg");
}

.icon-group-gray {
  background-image: url("../images/icon/icon-group-gray.svg");
}

.icon-store {
  background-image: url("../images/icon/icon-store.svg");
}

.icon-store-gray {
  background-image: url("../images/icon/icon-store-gray.svg");
}

.icon-arrow-down {
  background-image: url("../images/icon/icon-arrow-down.svg");
}

.icon-arrow-down-gray {
  background-image: url("../images/icon/icon-arrow-down-gray.svg");
}

.icon-arrow-right-light-gray {
  background-image: url("../images/icon/icon-arrow-right-light-gray.svg");
  background-size: contain;
  height: 15px;
  width: 10px;
  display: inline-block;
  background-repeat: no-repeat;
  margin: 0 10px;
}

/*活動新增頁面icon*/
.icon-copy {
  background-image: url("../images/icon/icon-copy-gray.svg");
}
.icon-copy:hover {
  background-image: url("../images/icon/icon-copy.svg");
}

/*活動查詢頁面icon*/
form > .icon {
  margin: 5px;
}

#SystemEmpEdit, #SystemRoleEdit, #ActivityApprove, #ActivityList, #ActivityStatus, #ActivityEdit, #ActivityLog, #ActivityGroupEdit, .icon-operate {
  display: flex;
  justify-content: center;
}

.icon-file {
  background-image: url("../images/icon/icon-file-gray.svg");
}
.icon-file:hover {
  background-image: url("../images/icon/icon-file.svg");
}

.icon-down {
  background-image: url("../images/icon/icon-down-gray.svg");
}
.icon-down:hover {
  background-image: url("../images/icon/icon-down.svg");
}

.icon-play {
  background-image: url("../images/icon/icon-play-gray.svg");
}
.icon-play:hover {
  background-image: url("../images/icon/icon-play.svg");
}

.icon-pen {
  background-image: url("../images/icon/icon-pen-gray.svg");
}
.icon-pen:hover {
  background-image: url("../images/icon/icon-pen.svg");
}

.icon-history {
  background-image: url("../images/icon/icon-history-gray.svg");
}
.icon-history:hover {
  background-image: url("../images/icon/icon-history.svg");
}

/*操作頁面icon*/
.icon-eye {
  background-image: url("../images/icon/icon-eye-gray.svg");
}
.icon-eye:hover {
  background-image: url("../images/icon/icon-eye.svg");
}

.icon-trash {
  background-image: url("../images/icon/icon-trash-gray.svg");
}
.icon-trash:hover {
  background-image: url("../images/icon/icon-trash.svg");
}

/*報表用icon*/
.icon-report-gray {
  background-image: url("../images/icon/icon-report-gray.svg");
}

.icon-redeem {
  background-image: url("../images/icon/icon-redeem.svg");
}

.icon-redeem-gray {
  background-image: url("../images/icon/icon-redeem-gray.svg");
}

.icon-accumulative {
  background-image: url("../images/icon/icon-accumulative.svg");
}

.icon-accumulative-gray {
  background-image: url("../images/icon/icon-accumulative-gray.svg");
}

.icon-diff {
  background-image: url("../images/icon/icon-diff.svg");
}

.icon-diff-gray {
  background-image: url("../images/icon/icon-diff-gray.svg");
}

div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 40%;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    color: #F36F1F;
    background: #F0F0F0;
    border: 1.5px solid black;
}