@charset "utf-8";

/******************************
      common
******************************/
.role ul{margin: 10px 0 0;}
.role a{display: block; text-align: center;}
.role a svg{fill:#BEBEBE;}
.extand{overflow: hidden;max-height: 55px;transition: max-height 0.1s ease-in-out;}
.extand.expanded {max-height: 2000px; /* 假設內容不會超過這個高度 */}
.expanded + #btntoggle{transform: rotateZ(180deg);}

input[readonly]:not(.flatpickr-input) {
    background-color: var(--bs-app-sidebar-light-menu-link-bg-color-active);
    cursor: not-allowed;
}
.badge-light-secondary {color: var(--bs-gray-600);}
.invalid-feedback {color: var(--bs-danger);}
.kt_docs_sweetalert_basic[checked=false] {
      background-position: left center!important;
      opacity: .5!important;pointer-events: auto;
}
.kt_docs_sweetalert_basic[checked=true] {
      background-position: right center!important;
      opacity: 1!important;pointer-events: auto;
}
.collapse_table {margin-left: 15px;}
.d-tbody.active:not(.collapsed) .rotate-90 {
    transform: rotateZ(90deg);
    transition: transform .3s ease;
}
/******************************
      menu
******************************/
[data-kt-app-layout=light-sidebar][data-kt-app-header-fixed=true] .app-header {background-color: #fff;}
.menu_notifi_wrap a {
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
}
.menu_notifi_wrap .flex-stack + .flex-stack {border-top: 1px solid var(--bs-card-border-color);}


/******************************
      sidebar
******************************/
.menu-item .menu-icon svg path {
    fill: var(--bs-gray-700);
    opacity: .5;
}
.menu-item:hover .menu-icon svg path {opacity: 1;}
.menu-link.active .menu-icon svg path {fill: var(--bs-primary);opacity: 1;}
.menu-item .menu-link .nav-icon {display: inline-block;margin:0 10px 0 5px;font-size: calc(18.2px + .15vw);-webkit-transition: var(--transition);-o-transition: var(--transition);transition: var(--transition);    color: var(--bs-gray-500);}

/******************************
      tab
******************************/
.common_tab ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.common_tab .nav-item {width: auto;}

/******************************
      box
******************************/
.common_box .card {
      min-width: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
}

/******************************
      dataTable
******************************/
@media screen and (max-width: 1100px) {
      table.dataTable thead>tr>td.sorting:after, 
      table.dataTable thead>tr>td.sorting_asc:after, 
      table.dataTable thead>tr>td.sorting_asc_disabled:after, 
      table.dataTable thead>tr>td.sorting_desc:after, 
      table.dataTable thead>tr>td.sorting_desc_disabled:after, 
      table.dataTable thead>tr>th.sorting:after, 
      table.dataTable thead>tr>th.sorting_asc:after, 
      table.dataTable thead>tr>th.sorting_asc_disabled:after, 
      table.dataTable thead>tr>th.sorting_desc:after, 
      table.dataTable thead>tr>th.sorting_desc_disabled:after {
            display: none!important;
      }
}

/******************************
      table
******************************/
.btn-table {padding: 0!important;}
.btn-table i, .table-wth-icon i {font-size: 1.4rem;}
.date_right_icon i {
      margin-left: 0!important;
      right: 0;
}
.date_right_icon input {padding-right: 3rem!important}
.date_right_icon button {
      position: absolute;
      right: 3px;
}
.date_right_icon button.border-0 {
      background-color: #fff;
      color: var(--bs-primary);
}
.collapse_table table {margin: 0;}
.collapse_table tr, .collapse_table td, .collapse_table th {border: none!important;}
.collapse_table td, .collapse_table th {padding: .75rem .75rem .75rem 0!important;}
.collapse_table .text-muted {width: 150px;}
@media screen and (min-width: 1100px) {
      .table_half_col tbody tr {
            width: 50%;
            display: inline-flex;
            flex-wrap: wrap;
            border-bottom: none!important;
      }
      .table_half_col tbody td {
            width: 70%;
            display: inline-flex;
            flex-wrap: wrap;
            border-bottom: none!important;
      }
      .table_half_col tbody .text-muted {width: 25%;align-items: center;}
      .table_half_col tbody {width: 100%;}
      .table_half_col td.fw-bold {padding-right: 2.5rem!important;}
}
@media screen and (max-width: 1099px) {
      .table_half_col tbody .text-muted {width: 120px;}
}

/******************************
      edit_records
******************************/
.edit_records .card-header  {
      min-height: auto;
      padding: 1rem 2.25rem 1.5rem;
}
.edit_records_wrap {
      display: flex;
      flex-direction: column;
      margin-left: 30px;
}
.edit_records_item.active time, .edit_records_item.active .edit_record_type {color: var(--bs-primary);}
.edit_records_item time, .edit_records_item .edit_record_type {color: #000;}
.edit_records_item span {color: var(--bs-text-gray-600);}
.edit_records_item + .edit_records_item {padding-top: 1.25rem;}
.edit_records_area + .edit_records_area {
      padding-top: 1.25rem;
      margin-top: 1.25rem;
      border-top: 1px solid var(--bs-card-border-color);
}
.edit_records_item a {display: block;}
.edit_records_item:hover time, .edit_records_item:hover .edit_record_type, .edit_records_item:hover span {color: var(--bs-primary);}

/******************************
      sign-area
******************************/
.sign-area {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 300%;
      color: #BEBEBE;
      width: 100%;
      height: 300px;
      border: 1px solid #E5E5E5;
}
.sign-area img {height: 80%;}
@media screen and (max-width: 991px) {
      .sign-area {margin-bottom: 30px;}
}

/******************************
      resizable width
******************************/
.resizable-wrap {
      width: 100%;
      float:left;
      overflow:hidden;
      height:100%;
}
.resizable {
      width: 50%;
      height:100%;
      padding: 0;
      display: block;
      float:left;
      position:relative; 
}
.resizable1 {float:left;}
.resizable2 {float:right;}
.resizable .inner {
      overflow:hidden;
      overflow-y:auto;
      height:100%;
      top:0;
      left:0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.resizable1 .inner {margin-right:2px;}
.resizable2 .inner {margin-left:2px;}
.resizable .inner .table {width: 1200px;}
.resizable .table-in-table td, .resizable .table-in-table th {padding-top: 1rem;padding-bottom: 1rem;}
.resizable .table-in-table td:first-child {padding-left: 0;}
.ui-resizable-e { 
      cursor: e-resize; 
      display:block!important;
      width: 4px; 
      right: -2px; 
      top: 0; 
      bottom: 0; 
      background: #BEBEBE;
}

/******************************
      gantt
******************************/
.gantt_task_scale {cursor: pointer;}
.gantt_side_content.gantt_right,.gantt_side_content.gantt_left {
      padding-left: 2px;
      top: 0;
}
.gantt_marker {
      height: 100%;
      width: 2px;
      top: 0;
      position: absolute;
      text-align: center;
      background-color: rgba(255,0,0,.4);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      opacity: .7;
      cursor: pointer;
}
.gantt_marker .gantt_marker_content {
      padding: 5px;
      background: #009ef7;
      color: #d50000;
      position: absolute;
      font-size: 10px;
      line-height: 12px;
      opacity: 1;
      left: 7px;
      top: -2px;
}
.gantt_marker .gantt_marker_icon { 
      width: 16px;
      height: 16px;
      border-radius: 0;
      background: #d50000;
      position: absolute;
      transform: rotate(-45deg);
      left: 50%;
      top: 0%;
      margin: 0px 0 0 -8px;
}
.gantt_marker .gantt_marker_icon::after {
      content: '';
      width: 6px;
      height: 6px;
      margin: 5px 0 0 -3px;
      background: white;
      position: absolute;
      border-radius: 0;
}
.gantt_task_scale {height: 66px!important;}
.gantt_scale_line {height: 33px!important;}
.gantt_task {width: 100%!important;}
.gantt_data_area {background-color: #FFF;}
.baseline {
      position: absolute;
      border-radius: 2px;
      opacity: 0.4;
      margin-top: -20px;
      height: 5px;
      background: #009ef7;
}
.gantt_task_line, .gantt_line_wrapper {margin-top: 3px;}
.gantt_task_progress {background-color: #009ef7;}
.gantt_task {
      overflow-x: scroll;
      overflow-y: scroll;
}
.gantt_data_area, .gantt_layout_content, .gantt_layout_cell.gantt_layout_outer_scroll, 
.gantt_layout_cell.gantt_layout.gantt_layout_x {height: 100%!important;}


.icon_clock{position: relative;}
.icon_clock a{color: var(--bs-gray-500); }
.icon_clock .layer{position: absolute;top: 30px;right: -20px; display: none;}
.icon_clock:hover .layer{display: block;}
.btn_more{position: relative;}
.dropdown-menu {bottom: 33px;--bs-bg-rgb-color: var(--bs-body-bg-rgb);}
.pickweek{width: 140px;}
.pickyear{width: 100px;}

.pickweek .pickweek_wrap{flex: 0 0 50%;}
#Currency{border-bottom:1px solid var(--bs-card-border-color);}
/* 
.common_title:after{content: ""; height: 4px;--bs-bg-rgb-color: var(--bs-light-rgb);background-color: var(--bs-light)!important;position: absolute;left: 0; right: 0;bottom: 0;border-radius: 0.475rem;}
.common_title h6{display: inline-block;position: relative;}
.common_title h6:after{content: ""; height: 4px;background-color: #009ef7;border-radius: 0.475rem;position: absolute;} */
.common_title{position: relative;}
.common_title h6{position: relative;display: inline-block;margin: 0;}
.common_title .nav-text {display: inline-block; text-align: center;}
.common_title .bullet-custom{display: block;}
.menu-item .menu-link .menu-title{flex-grow: revert; margin-right: 5px;}
.w-20{width: 20%;}
.Tip{text-align: right;}

.admintable td:first-child a{color: #009ef7!important;}
.admintable td:first-child a:hover{color: #4fbeff!important;}
.tree,.tree li,.tree li ul,.tree li ul li{list-style: none;position: relative;}
.tree,.tree li ul{position: relative;}
.second_level{margin-top: 10px;}
.second_level li{margin-bottom: 8px;position: relative;}
.third_level{margin-top: 10px;}
.third_level li{margin-bottom: 8px;position: relative;}
.tree{position: relative;}
#kt_header_user_menu_toggle .menu-sub-dropdown{display: none;}
#kt_header_user_menu_toggle .userphoto:hover .menu-sub-dropdown{display: flex; position: absolute; top: 40px; right: 0;}
#modal_upload_userimg_lightbox .modal-body {text-align: center;}
.uploadimg input{width: 0!important;height: 0!important;overflow: hidden;opacity: 0;}
.cr-slider-wrap {width: 100%;height: 2em;z-index: 99;display: flex;justify-content: center;align-items: center;}
.cr-slider-wrap .cr-slider {-webkit-appearance: none;width: 55%;background-color: transparent;}
.cr-slider-wrap .btn{font-size: 2rem;    color: var(--bs-text-muted);}
.cr-slider-wrap .cr-slider::-webkit-slider-runnable-track {width: 100%;height: 4px;background-color: #c8cccf;border: 0;border-radius: 1em;}
.cr-slider-wrap .cr-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 16px;height: 16px;margin-top: -6px;background-color: #8193a2;border-radius: 50%;border: none;transform: scale(1);-webkit-transition: transform 0.3s;transition: transform 0.3s;}
.cr-slider-wrap .cr-slider:hover::-webkit-slider-thumb {transform: scale(1.25);}
.cr-slider-wrap .cr-slider:focus {outline: none;}
.cr-slider-wrap .cr-slider:focus::-webkit-slider-thumb {background-color: #425389;}
.cr-slider-wrap .cr-slider::-moz-range-track {width: 100%;height: 4px;background-color: #c8cccf;border: 0;border-radius: 1em;}
.cr-slider-wrap .cr-slider::-moz-range-thumb {height: 16px;width: 16px;margin-top: -6px;background-color: #8193a2;border-radius: 50%;border: none;transform: scale(1);-moz-transition: transform 0.3s;transition: transform 0.3s;}
.cr-slider-wrap .cr-slider:hover::-moz-range-thumb {transform: scale(1.25);}
.cr-slider-wrap .cr-slider:-moz-focusring {outline: 1px solid white;outline-offset: -1px;}
.cr-slider-wrap .cr-slider:-moz-focusring::-moz-range-thumb {background-color: #425389;}
.cr-slider-wrap .cr-slider::-ms-track {width: 300px;height: 4px;background: transparent;border-color: transparent;border-width: 6px 0;color: transparent;}
.cr-slider-wrap .cr-slider::-ms-fill-lower, .cr-slider-wrap .cr-slider::-ms-fill-upper {background: #c8cccf;border-radius: 10px;}
.cr-slider-wrap .cr-slider::-ms-thumb {border: none;height: 16px;width: 16px;border-radius: 50%;background-color: #8193a2;}

.second_level li:after{
      content: "";
      display: block;
      height: 47px;
      width: 1px;
      border-left: 1px solid #999;
      margin-top: -1px;
      position: absolute;
      top: -5px;
      left: -20px;

}
.second_level li:before{
      content: "";
      display: block;
      width: 10px;
      height: 0;
      border-top: 1px solid #999;
      margin-top: -1px;
      position: absolute;
      top: 14px;
      left:-20px;
}
.second_level li:last-child:after{
      content: "";
      height: 20px;
}
.select2-selection__placeholder{color: var(--bs-input-color)!important;}
.pickprint {position: relative;display: inline-block;}
.dropbtn{padding: calc(0.55rem + 3px) calc(1.25rem + 1px);    border: 0;background-color: var(--bs-body-bg)!important;border-radius: 5px;width: 100px;    color: var(--bs-input-color);font-weight: bold;}
.pickprint:hover .dropdown-content {display: block;}    
.dropdown-content {
      display: none;
      position: absolute;
      min-width: 200px;
      z-index: 5;
      border-radius: 0.475rem;
      background-color: var(--bs-menu-dropdown-bg-color);
      box-shadow: var(--bs-menu-dropdown-box-shadow);
      top: 25px;
}
    
.dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
}
.dropdown-content a:hover {background-color: #eee;}


/* @media print {
      body * {
          display: none;
      }
      .app-content, .app-content * {
          display: block;
      }
      @page {
            size: A4 portrait;
                     orphans: 3;
          }
        
          table tr {
            page-break-inside: avoid;
          }
      
  }
 */
 .btn.btn-outline:not(.btn-outline-dashed){border: 0 none;}