* {
  font-family: 'Microsoft JhengHei', 'Microsoft YaHei', 'Arial', sans-serif;
}

.warning {
  color: red;
  margin: 2 15 2 15;
  padding: 0 5 0 15;
}

.bad_value {
  color: red;
}

.bad_input {
  border: solid red 2px;
}

.box {
  border: solid;
  border-width: thin;
  width: 100%;
}

.thin_box {
  border-style: solid;
  border-width: 1;
  border-color: black;
}

.prod_image_box {
  border-style: solid;
  border-width: 2;
  border-color: #cccccc;
  background: #f6f6f6;
}

/* the thin bar under the tab menu, also used to cap the left menu */
.tab_bar {
  background: #cc6633;
}

.top_strip {
  padding: 0;
}

.case_list {
  background-color: white;
}

.case_list td {
  background-color: #eeeeee;
  text-align: center;
  padding: 2 4 2 4;
}

.case_list_title td {
  background-color: #cc6633;
  color: white;
  text-align: center;
  padding: 2 4 2 4;
}

.case_list_title A:link,
.case_list_title A:visited,
.case_list_title A:active {
  color: white;
}

.case_section_head {
  background-color: #336699;
  color: white;
  font-weight: bold;
  text-align: left;
  padding: 2 2 2 4;
  border: solid;
  border-width: 1;
  border-color: #336699;
}

.qitem {
  border: solid;
  border-width: thin;
  background-color: #778899;
}

.qitem td {
  background-color: #ffff66;
}

.tb_tight {
  border-width: 0;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

/* 9/25/02 hctu: tbpr is a table style that suitable for print. */
.tbpr {
  border-color: black;
  border-style: solid;
  border-width: 1;
  border-collapse: collapse;
}

.tbpr td {
  border-color: black;
  border-style: solid;
  border-width: 1;
  padding-left: 2;
  padding-right: 2;
}

.tbpr_title td {
  border-color: black;
  border-style: solid;
  border-width: 1;
  font-weight: bold;
  text-align: center;
}

/* tbl1 is a generic table style currently used inside view case */
.tbl1_ori {
  background-color: #cccccc;
}

.tbl1 {
  background-color: #cccccc;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1;
  border-collapse: collapse;
}

.tb_gray1 {
  border-color: #686868;
  border-style: solid;
  border-width: 1;
  border-collapse: collapse;
}

/* this will be referenced by <td> under <table class="tbl1_new ..."> automatically. */
.tbl1 td {
  background-color: white;
  padding: 2 4 2 4;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1;
}

.tbl1_title td {
  background-color: #dddddd;
  font-weight: bold;
  text-align: center;
}

.tbl1_even {
  border: solid;
  border-width: 1;
  border-color: black;
}

.tbl1_ori td {
  background-color: white;
  padding: 2 4 2 4;
}

.tbl1_title_ori td {
  background-color: #dddddd;
  font-weight: bold;
  text-align: center;
}

.tbl1_supplier td {
  background-color: #eeffff;
}

.tbl1_buyer td {
  background-color: #ffeeff;
}

/* like tbl1 but without colors */
.tbl2 {
  border-style: solid;
  border-width: 1;
  border-collapse: collapse;
}

.tbl2 td {
  padding: 2 4 2 4;
  border-style: solid;
  border-width: 1;
}

.tbl2_title td {
  font-weight: bold;
  text-align: center;
}

/* 9/25/02 hctu: Linda asked for a larger font size then "medium" */
.my_title {
  font-weight: bold;
  font-size: 18px;
}
.title_margin {
  margin-top: 19px;
}

.my_path_title {
  font-weight: bold;
  font-size: 120%;
  margin: 4 4 10 4;
}

.tight form {
  padding: 0;
  margin: 0;
}

.search {
  border-width: 0;
}

.search table {
  border-width: 0;
  background-color: white;
}

.search td {
  background-color: white;
  padding: 4 4 4 4;
}

.search1 td {
  background-color: #eeeecc;
  padding: 4 4 4 4;
}

.search_title td {
  text-align: center;
  background-color: #cc6633;
  font-weight: bold;
  color: white;
  padding: 2 2 2 2;
}

.prod_section_head {
  background-color: #eeeeff;
  font-size: small;
  font-weight: bold;
  text-align: left;
  padding: 2 2 2 2;
}

.prod_info {
  padding: 5 1 2 10;
}

.page_head {
  background-color: #b1b18c;
  font-weight: bold;
  text-align: left;
  padding: 3 2 3 4;
}

.small_button {
  font-size: 12px;
}

.middle_button {
  height: 24px;
}

.highlight {
  background-color: #ffff00;
}

.label {
  font-weight: bold;
  text-align: left;
}

.na {
  font-weight: normal;
}

.cell1_rb {
  background-color: #dddddd;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  padding: 2 5 2 5;
}

.cell1_lb {
  background-color: #dddddd;
  text-align: left;
  vertical-align: top;
  font-weight: bold;
  padding: 2 5 2 5;
}

.cell1_lp {
  background-color: #dddddd;
  text-align: left;
  vertical-align: top;
  padding: 2 5 2 5;
}

.cell2_rp {
  background-color: white;
  text-align: right;
  padding: 2 5 2 5;
}

.cell2_lp {
  background-color: white;
  text-align: left;
  padding: 2 5 2 5;
}

.left_menuskin {
  position: absolute;
  width: 110px;
  background-color: #fafafa;
  border: 2px solid #eeeeee;
  font: normal 10pt Verdana;
  line-height: 18px;
  z-index: 100;
  visibility: hidden;
}

.left_menuskin a {
  text-decoration: none;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
}

A.white:link,
A.white:active,
A.white:visited {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
A.black:link,
A.black:active,
A.black:visited {
  color: black;
  text-decoration: none;
}
A.green:link,
A.green:active,
A.green:visited {
  color: #669966;
  font-weight: bold;
}
A.tree:link {
  color: #0000ff;
  text-decoration: none;
}
A.tree:active {
  color: #66ff66;
  text-decoration: none;
}
A.tree:visited {
  color: #0000ff;
  text-decoration: none;
}
A.tree:hover {
  color: #0000ff;
  text-decoration: underline;
}
A.tree1:link {
  color: #ffffff;
  background: #a1c5e5;
  text-decoration: none;
}
A.tree1:active {
  color: #ffffff;
  background: #a1c5e5;
  text-decoration: none;
}
A.tree1:visited {
  color: #ffffff;
  background: #a1c5e5;
  text-decoration: none;
}
A.tree1:hover {
  color: #ffffff;
  background: #a1c5e5;
  text-decoration: underline;
}
A.top:link {
  color: #ffffff;
  text-decoration: none;
}
A.top:active {
  color: #66ff66;
  text-decoration: none;
}
A.top:visited {
  color: #ffffff;
  text-decoration: none;
}
A.topselected:link {
  color: #000000;
  text-decoration: none;
}
A.topselected:active {
  color: #66ff66;
  text-decoration: none;
}
A.topselected:visited {
  color: #000000;
  text-decoration: none;
}

.even_section {
  font-size: 12pt;
}

.treeNodeIcon {
  float: left;
}

.nowrap {
  white-space: nowrap;
}

/*------------- header & footer -------------*/
.meunPage {
  position: relative;
  height: 100%;
}

.meunHeader {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: white;
  z-index: 999;
  box-shadow: 0px 3px 6px #00000029;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  line-height: 25px;
  z-index: 998;
  width: 100%;
  background-color: #f2f6fc;
  border-top: 1px solid #dbdbdb;
}

.companyHeader {
  line-height: 24px;
  font-size: 16px;
  padding-left: 5px;
  color: #333333;
}

/*------------- top_menu css -------------*/
.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #5e5e5e;
  border-radius: 25px;
  padding: 5px;
  width: fit-content;
  margin: -3px 0px 0px 0px;
}

.searchText {
  border: none;
  background-color: #f2f6fc;
  vertical-align: middle;
  height: 20px;
  max-height: 20px;
  width: 10vw;
  color: #333333;
  margin: 0;
}

.searchText:focus {
  color: #333333;
  background-color: #f2f6fc;
  outline: 0;
}

#searchBtn {
  margin: 0px;
  line-height: 20px;
  font-size: 20px;
  color: #dddddd;
  background-color: #f2f6fc;
  vertical-align: middle;
  /* width: 25px; */
  /* height: 20px; */
  border: 0px;
  cursor: pointer;
  outline: 0;
  padding: 0px;
}

#searchBtn:hover {
  color: #ffffff;
}

#top_menu {
  background-color: #f2f6fc;
  min-height: 50px;
  height: 50px;
  position: relative;
}

#options_menu {
  background-color: #f2f6fc;
  position: absolute;
  right: 0px;
  height: 50px;
  width: 60vw;
  border: 0px;
  top: 0px;
  bottom: 0px;
}

.options_optionMenu {
  /* display: inline-block; */
  height: 50px;
  float: right;
  display: inline-flex;
  align-items: center;
}

.options_search {
  display: inline-block;
  height: 50px;
  float: right;
  margin: 0px 5px 0px 0px;
  z-index: 1;
  position: relative;
}

@media (max-width: 450px) {
  .options_search {
    display: none;
  }
}
#main_menu {
  min-width: 100px;
  margin-left: 150px;
  margin-right: 350px;
  transform: translateY(-50px);
}

#menu.k-menu,
#optionmenu.k-menu {
  border-width: 0px;
  color: #333333;
  background-color: #f2f6fc;
}

#accessProjectsMenu.k-menu {
  border-width: 0px;
  color: #777777;
  background-color: #ffffff;
}

#menu.k-menu.k-header,
#optionmenu.k-menu.k-header,
#accessProjectsMenu.k-menu.k-header {
  background-image: none;
  background-color: none;
}

#menu.k-menu .k-group {
  background-color: #777777;
}

#menu.k-menu .k-item {
  background-color: #f2f6fc;
  background-image: none;
  line-height: 50px !important;
  text-align: left !important;
  padding: 0px 5px !important;
  border-width: 0px;
}

#menu.k-menu .k-item.item {
  padding: 0px 0px 0px 10px !important;
}

#menu.k-menu .k-link {
  color: #5e5e5e;
  line-height: 50px !important;
  text-align: left !important;
  padding: 0px 0px 0px 0px !important;
}

#optionmenu.k-menu .k-link {
  color: #5e5e5e;
  line-height: 50px !important;
  text-align: left !important;
  padding: 0px 5px !important;
}

#menu.k-menu .k-link:hover,
#optionmenu.k-menu .k-link:hover {
  color: #070707;
}

#menu.k-menu .k-state-border-down,
#optionmenu.k-menu .k-state-border-down {
  color: #5e5e5e;
  background-color: #f2f6fc;
}

#menu.k-menu .k-state-border-right {
  color: #070707;
  background-color: #f2f6fc !important;
}

#menu.k-menu .k-state-border-left {
  color: #070707;
  background-color: #f2f6fc !important;
}

#menu.k-menu .mainItem a.k-link {
  height: 50px;
  line-height: 55px !important;
  padding: 0px 5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu.k-menu .subItem a.k-link {
  line-height: 28px !important;
  text-align: left !important;
  padding: 0px 5px !important;
}

#menu.k-menu .item span.k-link {
  height: 50px;
}

#menu.k-menu .item .subItem2 span.k-link {
  height: auto;
}

#menu.k-menu .subItem span.k-link {
  line-height: 28px !important;
  text-align: left !important;
  padding: 0px 5px !important;
}

#menu.k-menu .subItem2 span.k-link {
  line-height: 28px !important;
  text-align: left !important;
  padding: 0px 15px 0px 5px !important;
}

#menu.k-menu .k-i-arrow-s,
#menu.k-menu .k-i-arrow-e,
#optionmenu.k-menu .k-i-arrow-s,
#accessProjectsMenu.k-menu .k-i-arrow-s {
  margin: 0px !important;
  display: none !important;
}

#menu.k-menu .k-item.mainItem.k-first {
  border-right-width: 1px;
  border-left-width: 1px;
}

#optionmenu.k-menu-horizontal {
  display: inline-block;
}

#optionmenu.k-menu .k-state-hover {
  background-image: none;
  background-color: #f2f6fc;
}

#optionmenu.k-menu .item a.k-link,
#optionmenu.k-menu .item span.k-link {
  font-size: 20px;
}

#optionmenu.k-menu .subItem a.k-link,
#optionmenu.k-menu .subItem span.k-link {
  font-size: 14px !important;
  line-height: 28px !important;
  text-align: left !important;
  padding: 0px 5px !important;
}

#optionmenu.k-menu .k-item {
  background-color: #f2f6fc;
  text-align: left !important;
  border-width: 0px;
}

#accessProjectsMenu.k-menu .k-item {
  background-color: #ffffff;
  background-image: none;
  line-height: 30px !important;
  text-align: left !important;
  padding: 0px 5px !important;
  border-width: 0px;
}

#accessProjectsMenu.k-menu .k-state-hover {
  background-image: none;
  background-color: #dddddd;
}

#accessProjectsMenu.k-menu a {
  line-height: 20px;
  font-size: 14px;
  padding: 2.5px 5px !important;
  color: #777777;
}

#accessProjectsMenu.k-menu span.k-link {
  height: 30px;
  /* line-height: 33px; */
  font-size: 20px;
  padding: 0px !important;
}

.hide-link {
  margin-top: -5px !important;
}

.hide-arrow-s {
  display: none !important;
}

.hide-arrow-e {
  top: 4.5px !important;
}

.hide-image {
  vertical-align: middle !important;
  margin: 0px !important;
  padding: 2.5px 0px !important;
}

.mainItem {
  font-size: 35px;
}

.item {
  font-size: 14px;
}

.subItem {
  background-color: #ffffff !important;
  font-size: 14px;
}

.subItem:hover {
  background-color: #f2f6fc !important;
}

.subItem2 {
  background-color: #ffffff !important;
  font-size: 14px;
}

.subItem2:hover {
  background-color: #f2f6fc !important;
}

.sub-menu-item {
  padding: 0px 12px 0px 0px !important;
}

.arrow-right-icon {
  font-size: 12px;
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
}

.arrow-down-icon {
  font-size: 12px;
  padding-left: 2px;
}

#app_menu {
  font-size: 140px;
  line-height: 50px;
  height: 50px;
  width: 150px;
  border-width: 0px;
  cursor: pointer;
  color: #dddddd;
  background-color: #f2f6fc;
  /* overflow: hidden; */
}

#app_menu:hover {
  color: #ffffff;
}

#app_menu:hover #logo_icon_arrow {
  border-color: transparent transparent #ffffff transparent;
}

#app_menu.k-header {
  background-image: none;
  background-color: none;
}

#logo_icon {
  margin: -45px 0px 0px 5px;
}

#logo_icon_arrow {
  position: absolute;
  top: 41px;
  left: 141px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent #dddddd transparent;
}

#icons img {
  width: 30px;
  height: 30px;
}

#innergrid ul {
  list-style: none;
  /* margin: 0; */
  padding: 20px;
  margin: 0px;
}

#icons li {
  float: left;
  /* margin: 0 10px 10px 0; */
  cursor: pointer;
  text-align: center;
  /* width: 120px; */
  background-color: #ffffff;
  color: #dddddd;
  display: inline-flex;
  align-items: center;
}

#icons a {
  display: flex;
  align-items: center;
  color: #5e5e5e;
  text-align: left;
  padding: 5px;
  width: -webkit-fill-available;
  width: -moz-available;
}

#icons li:hover {
  background-color: #dddddd;
  border-radius: 8px;
}

#innergrid {
  max-height: calc(100vh - 90px);
  overflow: auto;
}

#gridbox {
  position: absolute;
  top: 50px;
  z-index: 100;
  width: 320px;
  background-color: #ffffff;
  box-shadow: 0 0 10px #ccc;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 15px;
  color: #666;
  display: none;
}

#icon_group_divider {
  background-color: #dddddd;
  width: inherit;
  height: 2px;
  margin: 15px 0px;
}
#icon_label {
  font-size: 18px;
  color: #212121;
  margin-bottom: 20px;
  font-weight: 400;
}

#icons_group1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#icons_group1 li {
  height: 50px;
}
#icons_group1 img {
  margin-right: 16px;
}
#icons_group1 a {
  font-size: 15px;
  margin-left: 5px;
}

#icons_group2,
#icons_group3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: space-between; */
  margin-left: 10px;
}

#icons_group2 li,
#icons_group3 li {
  height: 40px;
  width: 50%;
}

#icons_group2 a,
#icons_group3 a {
  font-size: 13.5px;
  margin: 9px 0px;
}

#icons_group2 img,
#icons_group3 img {
  width: 26px;
  height: 26px;
  margin-right: 14px;
}

#projsSubMenu.k-menu .k-link,
#meetingSubMenu.k-menu .k-link,
#issueSubMenu.k-menu .k-link {
  line-height: 23px !important;
  text-align: left !important;
  padding: 0px 5px !important;
}

#projsSubMenu.k-menu .k-i-arrow-s,
#meetingSubMenu.k-menu .k-i-arrow-s,
#issueSubMenu.k-menu .k-i-arrow-s {
  margin: 0px !important;
}

.sunMenuTitle {
  padding-left: 5px;
  line-height: 30px;
  background-color: #ebebeb;
}

#page_path {
  display: flow-root;
  text-align: left;
  width: 100vw;
  z-index: -1;
  position: absolute;
  /* height: 30px; */
  line-height: 30px;
  padding: 0px 5px;
  border-width: 1px 0px;
  border-style: solid;
  border-color: #dbdbdb;
  background: white;
}

#page_path div {
  float: left;
}

.quick_proj_setting {
  padding: 0px 2.5px;
  height: 30px;
  /* line-height:33px; */
  cursor: pointer;
  font-size: 25px;
  color: #ffd700;
}

.quick_proj_setting_line {
  padding: 0px 2.5px;
  height: 30px;
  /* line-height:33px; */
  cursor: pointer;
  font-size: 25px;
  color: #777777;
}

html {
  -ms-overflow-style: scrollbar;
}

.k-list-scroller {
  overflow-y: scroll;
}

SELECT.lineHeightFix4Edge {
  height: 100px;
  /*line-height:100px;*/
  width: 280px;
  overflow: auto;
}
/*
SELECT.lineHeightFix4Edge>OPTION{line-height:16px}
*/
#page_path .k-menu .k-image,
#menu_task_summary .k-menu .k-image {
  margin: 0;
}

#menu_di_summary_batch .k-link,
#menu_di_summary_create .k-link,
#menu_di_summary_import .k-link,
#menu_di_summary_archived .k-link,
#menu_di_summary_batch_move .k-link,
#menu_di_summary_lock_unlock .k-link,
#menu_di_summary_batch .k-link,
#menu_di_summary_batch .k-link,
#menu_di_summary_batch .k-link,
#menu_di_summary_batch .k-link,
#menu_di_summary_batch .k-link,
#menu_di_summary_batch .k-link {
  display: flex;
  align-items: center;
}

#menu_task_summary_create .k-link,
#menu_task_summary_batch .k-link,
#menu_task_summary_more .k-link,
#menu_task_summary_scheduled .k-link,
#menu_task_summary_more_expand .k-link,
#menu_task_summary_more_collapse .k-link,
#menu_task_summary_archived .k-link,
#menu_task_summary_batch_move .k-link,
#menu_task_summary_lock_unlock .k-link,
#menu_task_summary_more_expand .k-link,
#menu_task_summary_more_expand .k-link {
  display: flex;
  align-items: center;
}

.datepicker-input {
  border-right: none !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  font-size: 14px !important;
}
.search_textbox.datepicker-input {
  width: 110px !important;
}

.input-button {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
  border: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border-left: none;
  height: 25px;
}

.search_datepicker_button {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
  border: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border-left: none;
  height: 30px;
}

.select2-results__option {
  min-height: 15px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d0d0d0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}