@charset "UTF-8";

:focus-visible {
   outline: 2px auto #418CE6;
}

#header, body {
   background-color: #F9F9F9;
   /* background-color: #F4F4F4; */
   /* background-color: #F0F0F0; */
   /* background-color: #EDEDED; */
}

/* <%# wrapper視窗大小 975 + 240 %> */
@media (min-width: 1215px) {
   .wrapper {
      /* left: calc((100% - 240px - 975px) / 2 + 240px); */
      left: calc(50% - 487.5px + 120px);
      max-width: 975px;
   }
}
/* <%# wrapper視窗大小 975 + 60 %> */
@media (min-width: 1035px) {
   .wrapper.sideBarClose {
      /* left: calc((100% - 60px - 975px) / 2 + 60px); */
         left: calc(50% - 487.5px + 30px);
      max-width: 975px;
   }
}
.wrapper {
   padding: 0px 1.5rem 1.5rem 1.5rem;
}
@media (max-width: 992px) {
   .wrapper {
      padding: 0px 0rem 1rem 0rem;
   }
}

@media (max-width: 575px) {
   .wrapper {
      left: 240px;
      max-width: calc(100% - 240px);
      /* overflow-x: hidden; */
   }
   .wrapper.sideBarClose {
      left: 60px;
      max-width: calc(100% - 60px);
   }
}

/* <%# 標題 %> */
#reportName, .reportName, .title {
   color: #111111;
   font-size: 32px;
   font-weight: bold;
}

/* <%# 搜尋, grid (chart), 表格, 標題 區域 %> */
#divReportSearch, .divGrid, .divTable, .divTitle, .divContent {
   background-color: #FFFFFF;
   border-radius: 16px;
   padding: 24px;
}
@media (max-width: 575px) {
   #divReportSearch, .divGrid, .divTable, .divTitle, .divContent {
      padding: 8px;
   }
}
.divBorder {
   border: 1px solid #A5A6AA;
}
.modal-body .divTable {
   padding: 0px;
}

.pt-6 {
   padding-top: 4rem !important;
}

/* <%# grid (chart) 標題 %> */
#spanChartTitle, .titleChart {
   color: #111111;
   font-size: 18px;
   font-weight: bold;
}
/* <%# grid (chart) 標題數量 %> */
/* <%# 標題字體 %> */
#spanChartTitleCount {
   color: #111111;
   font-size: 24px;
   font-weight: bold;
}

/* <%# 中間標題 %> */
/* <%# 表格標題 %> */
.mediumTitle, .spanTableTitle {
   color: #111111;
   font-size: 21px;
   font-weight: bold;
}

/* <%# grid (chart) hq dashboard spinner %> */
.divHqDashboardSpinner {
   display: grid;
}
.imgHqDashboardSpinner {
   width: 100px;
   height: 100px;
}
.spanHqDashboardSpinner {
   color: #6D6D6D;
   font-size: 16px;
   text-align: center;
   margin-top: 2px;
}

/* <%# 字體 %> */
.blackFont {
   color: #111111;
   font-size: 16px;
}
.greenFont {
   color: #179944;
   font-size: 16px;
}
.greyFont {
   color: #6D6D6D;
   font-size: 16px;
}
.redFont {
   color: #E83A3A;
   font-size: 16px;
}
.orangeFont {
   color: #EB6547;
   font-size: 16px;
}

/* <%# 灰色小字 %> */
.smallGreyFont {
   color: #6D6D6D;
   font-size: 13px;
   min-height: 20px;
}
/* <%# 紅色小字 %> */
.smallRedFont {
   color: #E83A3A;
   font-size: 13px;
   height: 20px;
}
/* <%# 黑色小字 %> */
.smallBlackFont {
   color: #111111;
   font-size: 13px;
   height: 20px;
}

/* 正常粗細體 */
.normalFont {
   font-weight: normal;
}
/* 粗體 */
.boldFont {
   font-weight: bold;
}
/* 底線 */
.underlineFont {
   text-decoration: underline;
}

/* <%# 元件icon div %> */
.divElementIcon {
   min-width: 20px;
   width: 20px;
   margin-right: 0.5rem;
}
/* <%# 元件標題前 %> */
.elementTitleBefore {
   height: 20px;
   margin-bottom: 2px;
}
/* <%# 元件icon %> */
.elementIcon {
   font-size: 20px;
   color: #6D6D6D;
   height: 40px;
}
/* <%# 元件d-Block %> */
.elementdBlock {
   /* width: 100%; */
}
/* <%# 元件標題 %> */
.elementTitle {
   margin-bottom: 2px;
}
/* <%# 元件內容 %> */
.elementContent {
   display: flex;
   justify-content: start;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
}
/* <%# 隱藏 元件Icon %> */
.divSearchFilterNoIcon .divElementIcon {
   display: none;
}

/* <%# 成長率 %> */
.growthRate {
   font-size: 13px;
   font-weight: 600;
   color: #6D6D6D"
}

/* <%# 說明按鍵 %>*/
.btnComment {
   font-size: 20px;
   border: none;
   background-color: transparent;
}
.btnComment i {
   color: #418CE6;
}
.btnComment:hover i {
   color: #68ACFF;
}
.tooltip {
   z-index: 10000;
}
.tooltip-inner {
   max-width: inherit;
   text-align: start;
}

/* <%# checkbox %> */
/* <%# 客製化 checkbox border, 圖案 %> */
/* .formCheckRadio input[type=checkbox] {
   width: 24px;
   height: 24px;
   cursor: pointer;
   background-color: #FFFFFF;
   border-radius: 4px;
   vertical-align: middle;
   appearance: none;
   -webkit-appearance: none;
   border: 1px solid #6D6D6D;
} */
/* font-family: "Font Awesome 6 Free";
font: var(--fa-font-solid);
content: "\f00C";
font-size: 18px; */
/* .formCheckRadio input[type=checkbox]:checked::before {
   width: 24px;
   height: 24px;
   content: "\f021";
   font-family: IcoFont;
   font-size: 16px;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color:#EB6547;
   border-radius: 4px;
   border: 1px solid #EB6547;
   position: absolute;
   top: -1px;
   left: -1px;
} */
/* font-family: "Font Awesome 6 Free";
font: var(--fa-font-solid);
content: "\f068";
font-size: 18px; */
/* .formCheckRadio input[type=checkbox]:indeterminate::before {
   width: 24px;
   height: 24px;
   content: "\ef9a";
   font-family: IcoFont;
   font-size: 26px;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color:#EB6547;
   border-radius: 4px;
   border: 1px solid #EB6547;
   position: absolute;
   top: -1px;
   left: -1px;
} */

.formCheckRadio {
   /* min-height: 40px; */
   display: flex;
   align-items: start;
   padding-left: 0;
}
.formCheckRadio input[type=checkbox] {
   accent-color: #EB6547;
   width: 24px;
   height: 24px;
   cursor: pointer;
   position: relative;
   border-radius: 0.3rem;
   flex: 0 0 24px;
}
.formCheckRadio input[type=checkbox]:indeterminate::before {
   content: "";
   display: block;
   width: 24px;
   height: 24px;
   background-color:#EB6547;
   border-radius: 0.3rem;
}
.formCheckRadio input[type=checkbox]:indeterminate:disabled::before {
   background-color: #D1D1D1;
}
.formCheckRadio input[type=checkbox]:indeterminate::after {
   content: "";
   display: block;
   width: 14px;
   height: 4px;
   background-color: white;
   position: absolute;
   top: 10px;
   left: 5px;
}
.formCheckRadio input[type=checkbox]:indeterminate:disabled::after {
   background-color: #EDEDED;
}
.formCheckRadio:hover {
   background-color: #E8EAEE;
}
.formCheckRadio:active {
   background-color: #FFF3E2;
}
/* .formCheckRadio input[type=checkbox]:disabled {
   background-color: #AEAEAE;
}
.formCheckRadio input[type=checkbox]:disabled + span {
   color: #AEAEAE;
} */
/* <%# checkbox label %> */
.formCheckRadio label {
   position: relative;
   width: 100%;
   height: 100%;
   margin: 0;
   padding-left: 0;
   font-size: 16px;
   color: #111111;
   cursor: pointer;
   display: flex;
   justify-content: start;
   align-items: center;
}
/* <%# checkbox span %> */
.formCheckRadio span {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
   margin-left: 0.5rem;
}

/* <%# 分隔checkbox %> */
.checkboxSplit {
   margin-right: 1rem;
   /* margin-top: 0.5rem; */
   /* margin-bottom: 0.5rem; */
   min-height: 40px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}
.checkboxSplit:last-child {
   margin-right: 0;
}

/* <%# checkbox switch %> */
.formSwitch {
   display: flex;
   /* margin-top: 6px; */
}
.formSwitch span {
   margin-right: 0.5rem;
}
.formSwitch input[type=checkbox] {
   width: 0;
   height: 0;
}
.formSwitch label {
   cursor: pointer;
   width: 40px;
   height: 24px;
   background: #D2D3D9;
   display: block;
   border-radius: 20px;
   position: relative;
   margin-bottom: 0;
}
.formSwitch label:before {
   /* font-family: "Font Awesome 6 Free"; */
   font: var(--fa-font-solid);
   content: '\F00D';
   position: absolute;
   top: 1px;
   left: 1px;
   width: 22px;
   height: 22px;
   background: #6D6D6D;
   border: 1px solid #D2D3D9;
   border-radius: 90px;
   transition: all .15s ease-in-out;
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
}
.formSwitch input[type=checkbox]:checked + label {
	background: #EB6547;
}
.formSwitch input[type=checkbox]:checked + label:before {
   /* font-family: "Font Awesome 6 Free"; */
   font: var(--fa-font-solid);
   content: '\F00C';
	left: calc(100% - 1px);
	transform: translateX(-100%);
   border: 1px solid #EB6547;
   background: #FFFFFF;
   color: #111111;
}
.formSwitch input[type=checkbox]:focus + label {
   outline: 2px solid #418CE6;
}
.formSwitch input[type=checkbox]:disabled + label {
	background: #DCDCDC;
}
.formSwitch input[type=checkbox]:disabled + label:before {
   border: 1px solid #DCDCDC;
   background: #AEAEAE;
   color: #DCDCDC;
}
.formSwitch input[type=checkbox]:checked:disabled + label {
	background: #DCDCDC;
}
.formSwitch input[type=checkbox]:checked:disabled + label:before {
   border: 1px solid #DCDCDC;
   background: #FFFFFF;
   color: #DCDCDC;
}

/* <%# radio %> */
.formCheckRadio input[type=radio] {
   accent-color: #EB6547;
   width: 24px;
   height: 24px;
   cursor: pointer;
}

/* <%# 無點列表 radio %> */
.labelNoRadioButtonList {
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: 100%;
   min-height: 40px;
}
input[type="radio"].inputNoRadioButtonList {
   width: 0;
   height: 0;
}
.noRadioButtonList {
   /* display: flex;
   justify-content: start;
   align-items: center; */
   font-size: 16px;
   cursor: pointer;
   color: #111111;
   background-color: transparent;
   width: 100%;
   height: 100%;
   min-height: 40px;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
}
input[type="radio"].inputNoRadioButtonList:checked + .noRadioButtonList {
   background-color: #FFF3E2;
   cursor: default;
}
.noRadioButtonList:hover {
   background-color: #E8EAEE;
}
.noRadioButtonList:active {
   background-color: #FFF3E2;
}
input[type="radio"].inputNoRadioButtonList:disabled + .noRadioButtonList {
   background-color: transparent;
   color: #AEAEAE;
   cursor: default;
}

/* <%# 無點橘圓框白字 radio %> */
.labelNoRadioButtonNormal {
   margin: 0.25rem 0.5rem 0.25rem 0;
   display: flex;
}
input[type="radio"].inputNoRadioButtonNormal {
   width: 0;
   height: 0;
}
.noRadioButtonNormal {
   display: flex;
   border-radius: 60px;
   background-color: transparent;
   color: #EB6547;
   border: 1px solid #EB6547;
   width: 56px;
   height: 32px;
   font-weight: 500;
   cursor: pointer;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   transition: transform 0.2s ease-in-out;
}
input[type="radio"].inputNoRadioButtonNormal:checked + .noRadioButtonNormal {
   background-color: #EB6547;
   color: white;
   border: none;
   cursor: default;
}
.noRadioButtonNormal:hover {
   background-color: #EF864C;
   color: white;
   border: none;
}
.noRadioButtonNormal:active {
   background-color: #81230E;
   color: white;
   border: none;
   transform: scale(0.9);
}
input[type="radio"].inputNoRadioButtonNormal:focus + .noRadioButtonNormal {
   outline: 2px solid #418CE6;
}

/* <%# 無點橘背景線橘字 radio %> */
.labelNoRadioButtonUnderLine {
   width: 64px;
   display: flex;
}
input[type="radio"].inputNoRadioButtonUnderLine {
   width: 0;
   height: 0;
}
.noRadioButtonUnderLine {
   display: flex;
   background-color: transparent;
   color: #6D6D6D;
   width: 24px;
   height: 48px;
   font-weight: normal;
   cursor: pointer;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   position: static;
}
input[type="radio"].inputNoRadioButtonUnderLine:checked + .noRadioButtonUnderLine {
   border-bottom: 4px solid #EB6547;
   color: #EB6547;
   font-weight: 550;
   cursor: default;
   position: relative;
   top: 2px;
}
.noRadioButtonUnderLine:hover {
   border-bottom: 4px solid #EF864C;
   color: #EF864C;
   font-weight: 500;
   position: relative;
   top: 2px;
}
.noRadioButtonUnderLine:active {
   border-bottom: 4px solid #81230E;
   color: #81230E;
   font-weight: 500;
   position: relative;
   top: 2px;
}
input[type="radio"].inputNoRadioButtonUnderLine:disabled + .noRadioButtonUnderLine {
   border: none;
   color: #AEAEAE;
   cursor: default;
   font-weight: normal;
   position: static;
}
input[type="radio"].inputNoRadioButtonUnderLine:focus + .noRadioButtonUnderLine {
   /* border-radius: 4px;
   outline: 2px solid #418CE6; */
}

/* <%# 橘背景白字 button %> */
.buttonNormal {
   border: none;
   background-color: #EB6547;
   color: white;
   height: 41px;
   font-weight: 500;
   font-size: 18px;
   border-radius: 4px;
   padding: 0 15px;
   transition: transform 0.2s ease-in-out;
   flex: 0 0 auto;
}
.buttonNormal-mini {
   padding: 0 8px;
   height: 30px;
   font-size: 14px;
   font-weight: 400;
}
.buttonNormal-sm {
   padding: 0 12px;
   height: 35px;
}
.buttonNormal:hover {
   background-color: #EF864C;
   color: white;
}
.buttonNormal:active {
   background-color: #81230E;
   color: white;
   transform: scale(0.9);
}
.buttonNormal:disabled {
   background-color: #DCDCDC;
   color: #AEAEAE;
   transform: scale(1);
}
.buttonNormal:focus {
   outline: 2px solid #418CE6 !important;
}

/* <%# 透明背景橘框橘字 button %> */
.buttonOutline {
   color: #EB6547;
   border: 1px solid #EB6547;
   background-color: transparent;
   height: 41px;
   font-weight: 500;
   font-size: 18px;
   border-radius: 4px;
   padding: 0 14px;
   transition: transform 0.2s ease-in-out;
}
.buttonOutline:hover {
   color: #EB6547;
   border: 1px solid #EB6547;
   background-color: #EB654729;
}
.buttonOutline:active {
   color: #81230E;
   border: 1px solid #81230E;
   background-color: #81230E29;
   transform: scale(0.9);
}
.buttonOutline:focus {
   outline: 2px solid #418CE6 !important;
}
.buttonOutline:disabled {
   border: none;
   background-color: #DCDCDC;
   color: #AEAEAE;
   transform: scale(1);
}

/* <%# 透明背景無框橘字 button %> */
.buttonOutlineNoBordor {
   color: #EB6547;
   border: none;
   background-color: transparent;
   /* width: 32px; */
   height: 24px;
   font-weight: 400;
   font-size: 16px;
   padding: 0px;
   border-radius: 4px;
}
.buttonOutlineNoBordor:hover {
   color: #EF864C;
}
.buttonOutlineNoBordor:active {
   color: #81230E;
}
.buttonOutlineNoBordor:focus {
   /* outline: 2px solid #418CE6; */
}

/* <%# 白背景灰字 button %> */
.buttonGray {
   color: #6D6D6D;
   border: 1px solid white;
   background-color: white;
   height: 41px;
   font-weight: 500;
   font-size: 18px;
   border-radius: 4px;
   padding: 0 14px;
   transition: transform 0.2s ease-in-out;
}
.buttonGray-sm {
   padding: 0 11px;
   height: 35px;
}
.buttonGray:hover {
   color: #DCDCDC;
   border: 1px solid white;
   background-color: white;
}
.buttonGray:active {
   color: #000;
   border: 1px solid white;
   background-color: white;
   transform: scale(0.9);
}
.buttonGray:focus {
   /* outline: 2px solid #418CE6; */
}
.buttonGray:disabled {
   color: #6D6D6D;
   transform: scale(1);
}

/* <%# 透明背景橘字摺疊 button %> */
.buttonFold {
   color: #EB6547;
   border: none;
   background-color: transparent;
   font-size: 13px;
   display: flex;
   align-items: center;
   border-radius: 4px;
}
.buttonFold:hover {
   color: #EF864C;
}
.buttonFold:active {
   color: #81230E;
}
.buttonFold i {
   font-size: 19px;
   transform: rotate(0deg);
   transition: transform 300ms ease;
}
.buttonFold i.arrow {
   transform: rotate(180deg);
   transition: transform 300ms ease;
}
.buttonFold:focus {
   /* outline: 2px solid #418CE6 !important; */
}

/* <%# 載入更多 button %> */
button.loadMoreData {
   border: 0;
   background-color: transparent;
   font-size: 13px;
   color: #EB6547;
   border-radius: 4px;
}
button.loadMoreData:hover {
   color: #EF864C
}
button.loadMoreData:active {
   color: #81230E
}
button.loadMoreData:after {
   content: "載入更多 \eab2";
   font-family: IcoFont;
   font-weight: 600;
}
button.loadMoreData:focus {
   /* outline: 2px solid #418CE6; */
}

/* <%# 匯出按鍵 %> */
.btnTableExcel {
   border: none;
   background-color: #EB6547;
   color: white;
   width: 88px;
   height: 41px;
   font-weight: 500;
   font-size: 18px;
   border-radius: 4px;
   transition: transform 0.2s ease-in-out;
}
.btnTableExcel:hover {
   background-color: #EF864C;
   color: white;
}
.btnTableExcel:active {
   background-color: #81230E;
   color: white;
   transform: scale(0.9);
}
.btnTableExcel:focus {
   outline: solid 2px #418CE6 !important;
}
/* <%# 匯出按鍵選項 %> */
.divTableExcel a:hover {
   background-color: #E8EAEE;
   color: #111111;
}
.divTableExcel a:active {
   background-color: #FFF3E2;
   color: #111111;
}
.divTableExcel a.disabled {
   pointer-events: none;
   cursor: default;
}

/* listButton */
.listButton {
   display: block;
}
.listButton button {
   width: 100%;
   height: calc(3.5rem + 2px);
   background-color: #FFFFFF;
   border: none;
   border-radius: .25rem;
   transition: transform 0.2s ease-in-out;
}
.listButton button:hover {
   background-color: #FFF3E2;
}
.listButton button:active {
   background-color: #EF864C; /* #EF864C80 */
   transform: scale(0.9);
}
.listButton button:focus {
   box-shadow: 0 0 0 .25rem rgba(239, 134, 76, 0.5) !important; /* #EF864C80 */
}

/* <%# icon 圓形 button %> */
.btnRoundIcon {
   border: none;
   background-color: transparent;
   color: #6D6D6D;
   font-size: 16px;
   width: 32px;
   height: 32px;
   border-radius: 50px;
   font-weight: normal;
   padding: 0;
   transition: transform 0.3s ease-in-out;
}
.btnRoundIcon:hover {
   background-color: #E8EAEE;
   color: #111111;
}
.btnRoundIcon:active {
   background-color: #FFF3E2;
   color: #111111;
   transform: scale(0.7);
}

.divFootButton {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   padding-right: 1.5rem;
   padding-left: 1.5rem;
   height: 54px;
   background-color: #FFFFFF;
   z-index: 1000;
   box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1) !important; /* #00000019 */
   /* border-top: 1px solid #A5A6AA; */
}

/* accordion */
.accordion-button {
   padding: 0.75rem 1.25rem;
}
.accordion-button:not(.collapsed) {
   color: #EB6547;
   background-color: #FFF3E2;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125) !important;
}
.accordion-button:focus {
   box-shadow: 0 0 0 .25rem rgba(239, 134, 76, 0.5) !important; /* #EF864C80 */
}

/* accordion iconCheck */
.accordion-button.iconCheck::after {
   font: var(--fa-font-solid);
   content: "\f00c";
   background-image: none;
   font-size: 28px;
   color: #EF864C;
   position: absolute;
   right: 16px;
   top: 10px;
   visibility: hidden;
}
.accordion-button.iconCheck:not(.collapsed)::after {
   visibility: visible;
   transform: rotate(0deg);
}

/* timeBar */
.divTimeBar {
   position: relative;
}
.divTimeBar .timeBar {
   height: 30px;
   border: 1px solid #A5A6AA;
}
.divTimeBar .timeBarTimeText {
   font-size: 12px;
   color: #A5A6AA;
   text-align: center;
   background-color: #FFFFFF;
   z-index: 1;
}
.divTimeBar .timeBarTimeLine {
   width: 1px;
   height: 8px;
   background-color: #A5A6AA;
}
.divTimeBar .timeBarTimeLine.longLine {
   height: 28px;
}
.divTimeBar .timeBarTimeLine.longLongLine {
   height: 48px;
}
.divTimeBar .timeBarTimeLine.longLongLongLine {
   height: 68px;
}
.divTimeBar .divTimeBarTime {
   position: absolute;
   top: 46px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.divTimeBar .timeBar.timeBarCantBook {
   background-color: #A5A6AA;
   border: none;
   position: absolute;
   top: 16px;
}
.divTimeBar .timeBar.timeBarBooking {
   background-color: #EB6547;
   border: none;
   position: absolute;
   top: 16px;
}
.divTimeBar .timeBarTimeText.timeBarrBookingTimeText {
   color: #EB6547;
}
.divTimeBar .timeBarTimeLine.timeBarrBookingTimeLine {
   background-color: #EB6547;
}

/* timeBarTooltips */
.timeBarTooltips, .divTimeBarTooltips {
   display: flex;
   justify-content: center;
   align-items: center;
}
.timeBarTooltipIcon {
   width: 18px;
   height: 18px;
   border-radius: 3px;
}
.timeBarTooltipChooseIcon {
   background-color: #EB6547;
}
.timeBarTooltipCantBookIcon {
   background-color: #A5A6AA;
}
.timeBarTooltipBookingIcon {
   background-color: #FFFFFF;
   border: 1px solid #A5A6AA;
}

/* input text */
.inputText {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 200px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   font-size: 16px;
   padding: 0 0.5rem;
}
.inputText:hover {
   border-bottom: 1px solid #EF864C;
}
.inputText:focus-within {
   border-bottom: 2px solid #EB6547;
}
.inputText:focus-within input[type=text],
.inputText:focus-within input[type=password] {
   /* top: 1px; */
}
.inputText input[type=text]:focus-visible,
.inputText input[type=password]:focus-visible {
   outline: none;
}
.inputText:has(input[type=text]:disabled),
.inputText:has(input[type=password]:disabled) {
   background-color: #DCDCDC;
   color: #AEAEAE;
   border-bottom: 1px solid #AEAEAE;
   cursor: auto;
}
.inputText input[type=text],
.inputText input[type=password] {
   position: relative;
   background-color: transparent;
   border: none;
   width: 100%;
   /* width: calc(100% - 22px); */
   height: 100%;
}
.inputText .btnDel {
   position: relative;
   top: 1px;
   left: 0px;
   width: 22px;
   height: 22px;
   border: none;
   background-image: url('/images/delete.png');
   background-size: 22px 22px;
   background-color: transparent;
   background-repeat: no-repeat;
}
.inputText:focus-within .btnDel,
.inputText:focus-within .btnHide {
   top: 2px;
}
.inputText .btnHide {
   position: relative;
   top: 1px;
   left: 0px;
   width: 25px;
   height: 20px;
   font-size: 20px;
   border: none;
   color: #6D6D6D;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: transparent;
}

/* <%# 搜尋text %> */
.searchText {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 200px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   padding: 0rem;
   font-size: 16px;
}
.searchText:hover {
   border-bottom: 1px solid #EF864C;
}
.searchText:focus-within {
   border-bottom: 2px solid #EB6547;
}
.searchText input[type=text]:focus-visible {
   outline: none;
}
.searchText i {
   position: relative;
   top: 0px;
   left: 4px;
   font-size: 20px;
   color: #6D6D6D;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 0.25rem;
}
.searchText:focus-within i {
   /* top: 1px; */
}
.searchText input[type=text] {
   position: relative;
   background-color: transparent;
   border: none;
   width: calc(100% - 58px);
   height: 100%;
   margin-left: 0.75rem;
}
.searchText:focus-within input[type=text] {
   /* top: 1px; */
}
.searchText .btnDel {
   position: relative;
   top: 1px;
   left: -9px;
   width: 22px;
   height: 22px;
   border: none;
   background-image: url('/images/delete.png');
   background-size: 22px 22px;
   background-color: transparent;
   background-repeat: no-repeat;
}
.searchText:focus-within .btnDel {
   top: 2px;
}

/* input textarea */
.inputTextArea {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 298px;
   height: 80px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   font-size: 16px;
   padding: 0.5rem;
}
@media (max-width: 575px) {
   .inputTextArea {
      width: 260px;
   }
}
.inputTextArea:hover {
   border-bottom: 1px solid #EF864C;
}
.inputTextArea:focus-within {
   border-bottom: 2px solid #EB6547;
}
.inputTextArea textarea:focus-visible {
   outline: none;
}
.inputTextArea:has(textarea:disabled) {
   background-color: #DCDCDC;
   color: #AEAEAE;
   border-bottom: 1px solid #AEAEAE;
   cursor: auto;
}
.inputTextArea textarea {
   position: relative;
   background-color: transparent;
   border: none;
   width: calc(100% - 26px);
   height: 100%;
   resize: none;
}
.inputTextArea .btnDel {
   position: relative;
   top: 0px;
   left: 4px;
   width: 22px;
   height: 22px;
   border: none;
   background-image: url('/images/delete.png');
   background-size: 22px 22px;
   background-color: transparent;
   background-repeat: no-repeat;
}
.inputTextArea:has(textarea:focus-within) .btnDel {
   top: 1px;
}
.inputTextArea textarea::-webkit-scrollbar {
   width: 8px;
   position: absolute;
   left: 0px;
}
.inputTextArea textarea::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #D2D3D9;
}
.inputTextArea textarea::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background: #9E9A99;
}

/* <%# input date %> */
.divDate {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}
.inputDate {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 142px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   justify-content: start;
   padding: 0px 8px;
   font-size: 16px;
   color: #111111;
   position: relative;
   cursor: pointer;
}
.inputDate::-webkit-calendar-picker-indicator {
   /* color: transparent; */
   /* background: none; */
   z-index: 1;
   cursor: pointer;
   position: absolute;
   right: 8px;
   /* Input Field click anywhere to show popup */
   /* bottom: 0;
   cursor: pointer;
   height: auto;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   width: auto; */
}
.divDate i {
   /* display: block; */
   display: none;
   background: none;
   position: absolute;
   font-size: 16px;
   top: 12px;
   right: 10px;
   color: #6D6D6D;
}
/* .divDate i:has(.divDate .inputDate::-webkit-calendar-picker-indicator:hover) {
   color: #EB6547;
} */
.divDate .inputDate:focus ~ i {
   color: #EB6547;
}
.inputDate:hover {
   border-bottom: 1px solid #EF864C;
}
.inputDate:focus {
   border-bottom: 2px solid #EB6547;
   outline: none;
   top: 1px;
   position: relative;
}

/* <%# input date time %> */
.inputDateTime {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 220px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   justify-content: start;
   padding: 0px 8px;
   font-size: 16px;
   color: #111111;
   position: relative;
   cursor: pointer;
}
.inputDateTime::-webkit-calendar-picker-indicator {
   z-index: 1;
   cursor: pointer;
   position: absolute;
   right: 8px;
   color: #6D6D6D;
}
.inputDateTime:hover {
   border-bottom: 1px solid #EF864C;
}
.inputDateTime:focus {
   border-bottom: 2px solid #EB6547;
   outline: none;
   top: 1px;
   position: relative;
}

/* <%# input month %> */
.inputMonth {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 142px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   justify-content: start;
   padding: 0px 8px;
   font-size: 16px;
   color: #111111;
   position: relative;
   cursor: pointer;
}
.inputMonth::-webkit-calendar-picker-indicator {
   z-index: 1;
   cursor: pointer;
   position: absolute;
   right: 8px;
   color: #6D6D6D;
}
.inputMonth:hover {
   border-bottom: 1px solid #EF864C;
}
.inputMonth:focus {
   border-bottom: 2px solid #EB6547;
   outline: none;
   top: 1px;
   position: relative;
}

/* <%# input number %> */
.inputNumber {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 200px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   font-size: 16px;
   padding: 0.5rem;
}
.inputNumber:hover {
   border-bottom: 1px solid #EF864C;
}
.inputNumber:focus-within {
   border-bottom: 2px solid #EB6547;
}
.inputNumber:focus-within input[type=number] {
   top: 1px;
}
.inputNumber input[type=number]:focus-visible {
   outline: none;
}
.inputNumber:has(input[type=number]:disabled) {
   background-color: #DCDCDC;
   color: #AEAEAE;
   border-bottom: 1px solid #AEAEAE;
   cursor: auto;
}
.inputNumber input[type=number] {
   position: relative;
   background-color: transparent;
   border: none;
   /* width: calc(100% - 22px); */
   width: calc(100%);
   height: 100%;
}
.inputNumber .btnDel {
   position: relative;
   top: 1px;
   left: 0px;
   width: 22px;
   height: 22px;
   border: none;
   background-image: url('/images/delete.png');
   background-size: 22px 22px;
   background-color: transparent;
   background-repeat: no-repeat;
}
.inputNumber:focus-within .btnDel,
.inputNumber:focus-within .btnHide {
   top: 2px;
}
.inputNumber .btnHide {
   position: relative;
   top: 1px;
   left: 0px;
   width: 25px;
   height: 20px;
   font-size: 20px;
   border: none;
   color: #6D6D6D;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: transparent;
}
/* <%# Chrome, Safari, Edge, Opera 隱藏數字輸入框的小箭頭 %> */
/* .inputNumber input[type=number]::-webkit-outer-spin-button,
.inputNumber input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */

/* <%# Firefox 隱藏數字輸入框的小箭頭 %> */
/* .inputNumber input[type=number] {
  -moz-appearance: textfield;
} */


/* <%# 下拉式 button %> */
.btnDropdown {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   height: 40px;
   text-align: start;
   padding: 0.5rem;
   border-radius: 4px 4px 0px 0px;
   font-size: 16px;
   width: 298px;
}
@media (max-width: 575px) {
   .btnDropdown {
      width: 260px;
   }
}
.btnDropdown:hover {
   border-bottom: 1px solid #EF864C;
}
.btnDropdown.active {
   border-bottom: 2px solid #EB6547;
}
.btnDropdown:disabled {
   background-color: #DCDCDC;
   color: #AEAEAE;
   border-bottom: 1px solid #AEAEAE;
   cursor: auto;
}
.btnDropdown i {
   position: relative;
   top: -24px;
   left: calc(100% - 23px);
   width: 24px;
   height: 24px;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #6D6D6D;
   transform: rotate(0deg);
   transition: transform 300ms ease;
   padding: 0;
}
.btnDropdown i.arrow {
   transform: rotate(180deg);
   transition: transform 300ms ease;
}

/* <%# 下拉式 button - 標題 %> */
.btnSpanDropdown {
   display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #111111;
   width: calc(100% - 20px);
   height: 24px;
}

/* <%# 下拉選單 %> */
.divDropdownMenu {
   position: absolute;
   box-shadow: 0px 4px 6px #00000029;
   background-color: #FFFFFF;
   z-index: 1000;
   top: 44px;
   left: 0px;
   padding: 1rem 0rem 1rem 0rem;
}

/* <%# 下拉選單 - 選項清單 %> */
.divDropdownMenuList {
   position: absolute;
   box-shadow: 0px 4px 6px #00000029;
   background-color: #FFFFFF;
   z-index: 1000;
   width: 100%;
   padding: 8px 0px;
   max-height: 216px;
   overflow-y: auto;
   overflow-x: hidden;
}
.divDropdownMenuList::-webkit-scrollbar {
   width: 8px;
}
.divDropdownMenuList::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #D2D3D9;
}
.divDropdownMenuList::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background: #9E9A99;
}
.btnDropdownList {
   width: 100%;
   min-height: 40px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 0.5rem 1rem;
}
.btnDropdownList.hover {
   background-color: #E8EAEE;
}
.btnDropdownList.active {
   background-color: #FFF3E2;
}

/* <%# 圓下拉式 button %> */
.btnDropdownRound {
   background-color: #F4F4F4;
   border: none;
   width: 160px;
   height: 28px;
   border-radius: 40px;
   display: flex;
   align-items: center;
}
.btnDropdownRound:hover {
   border: 1px solid #EF864C;
}
.btnDropdownRound.active {
   border: 2px solid #EB6547;
}
.btnDropdownRound span {
   text-align: start;
   margin-left: 5px;
   width: 115px;
   font-size: 16px;
}
.btnDropdownRound i {
   position: relative;
   top: 1px;
   left: 4px;
   width: 20px;
   height: 20px;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #6D6D6D;
   transform: rotate(0deg);
   transition: transform 300ms ease;
   padding: 0;
}
.btnDropdownRound i.arrow {
   top: 0px;
   transform: rotate(180deg);
   transition: transform 300ms ease;
}

/* <%# input file %> */
  .labelInputFile {
   background-color: #F4F4F4;
   border: none;
   border-bottom: 1px solid #6D6D6D;
   width: 290px;
   height: 40px;
   text-align: start;
   border-radius: 4px 4px 0px 0px;
   display: flex;
   align-items: center;
   cursor: pointer;
   margin-right: 24px;
   margin-bottom: 0rem;
}
@media (max-width: 575px) {
   .labelInputFile {
      width: 260px;
   }
}
.labelInputFile:hover {
   background-color: #F4F4F4;
   border-bottom: 1px solid #EF864C;
}
.labelInputFile:active {
   background-color: #F4F4F4;
   border-bottom: 2px solid #EB6547;
}
.labelInputFile:has(input[type=file]:disabled) {
   background-color: #DCDCDC;
   color: #AEAEAE;
   border-bottom: 1px solid #AEAEAE;
   cursor: auto;
}
.labelInputFile span {
   font-size: 16px;
   margin-left: 8px;
   color: #6D6D6D;
   position: relative;
   top: 0px;
}
.labelInputFile:active span {
   top: 1px;
}
.labelInputFile:active:has(input[type=file]:disabled) span {
   top: 0px;
}

/* modal */
.modal-title {
   color: #111111;
   font-size: 24px;
   font-weight: bold;
}
.modal-body {
   padding: 24px;
}

/* chart table */
.tableChart {
   font-family: "Noto Sans TC", "Microsoft Yahei", "微軟雅黑", sans-serif;
   font-size: 1rem;
   table-layout: fixed;
   width: 100%;
}
.tableChart thead tr th {
   color: #6D6D6D;
   font-size: 13px;
   font-weight: normal;
   padding: 0.5rem 0.25rem;
}
.tableChart thead tr th div {
   width: 100%;
   height: 100%;
}
.tableChart tbody tr.hover:hover {
   background-color: #E8EAEE;
}
.tableChart tbody tr td {
   color: #111111;
   width: auto;
   height: 36px;
   padding: 0.25rem;
   vertical-align: middle;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* table List */
.tableList tr td,
.subTableList tr td {
   text-align: start;
   white-space: nowrap;
}
.tableList tr td:first-child,
.subTableList tr td:first-child {
   /* white-space: nowrap; */
}
.tableList tr td:not(.tableList tr td:first-child),
.subTableList tr td:not(.subTableList tr td:first-child) {
   /* white-space: wrap; */
}
.tableList tr td:not(.tableList tr td:last-child),
.subTableList tr td:not(.subTableList tr td:last-child) {
   padding-right: 1rem;
   /* word-break: break-word; */
}
.tableList tr td:not(.tableList tr:last-child td),
.subTableList tr td:not(.subTableList tr:last-child td) {
   padding-bottom: 0.5rem;
}


/* <%# ======================================== %> */
/* <%# HqInv_Distribution, HqInv_FileDownload %> */

/* <%# 發票年份, 發票月份 下拉式 button %> */
.btnDropdownDate {
   width: 120px;
}
.btnDropdownDate span {
   width: 87px;
}
/* <%# 發票年份, 發票月份 下拉式選單 %> */
.divDropdownMenuDate {
   width: 120px;
}

/* <%# ======================================== %> */