/* for tabulator dataTree expand/ collaspe button*/
.tabulator-data-tree-control{
  height: var(--space-lg) !important;
  width: var(--space-lg) !important;
}

/* for tabulator header filter*/
.tabulator-header-filter{
  display: none;
}
.custom_tabu_header_filter_show{
  display: block!important;
}

[type=search] {
  -webkit-appearance: auto !important;
}

.tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content
  .tabulator-col-title {
  white-space: pre-line; /* Settings to enable line breaks within the tabulator title */
  text-overflow: clip;
}
.tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content{
    padding: .65em;
}
.tabulator-row .tabulator-cell{
  padding:0em .65em;
}

.tabulator-col:not(:last-child) {
  border-right: var(--space-2xs) solid var(--color-border-light);
}

/* 背景が透過されないように背景色を設定 */
.tabulator-tableHolder {
  --bgCo: transparent;
  background-color: var(--color-bg);
}

.tabulator {
  font-size: var(--font-base);
  border:0;
  border-top: var(--space-2xs) solid var(--color-border-light);
  border-bottom: 0;
  border-radius: 0px;
  width:auto;
  display:block!important;
}
.tabulator-tableHolder{
  border-bottom: var(--space-2xs) solid var(--color-border-light);
}
.tabulator .tabulator-header,
.tabulator .tabulator-tableHolder{
  border-left: var(--space-2xs) solid var(--color-border-light);
  border-right: var(--space-2xs) solid var(--color-border-light);
}
/* Tabulator for list screens */
.list_card_content .tabulator {
  margin: 0 calc(-1 * var(--space-lg));
}
.list_card_content .tabulator .tabulator-header,
.list_card_content .tabulator .tabulator-tableHolder {
  border-left: 0;
  border-right: 0;
}
.tabulator-row.tabulator-selectable {
  border-bottom: none;
}

.tabulator-row {
  background: var(--color-white);
  min-height: var(--tabu-row-height);
  transition: height var(--transition-fast) ease-in;
}
.tabu_edited_row > :first-child,
.tabu_edited_row > .tabu_1st_visible_cell,
.tabulator-row-editing > .tabu_1st_visible_cell
{
  border-left: var(--space-xs) solid var(--color-purple) !important;
}

/* css for transition between double and single row height */
.tabulator-row-double-height .tabulator-row:not(.tabulator-calcs-bottom){
  height:86px !important;
  transition: height 0.2s ease-in;
}

.tabulator-row-triple-height .tabulator-row:not(.tabulator-calcs-bottom){
  height:129px !important;
  transition: height 0.2s ease-in;
}

.tabulator-row-normal-half-height .tabulator-row:not(.tabulator-calcs-bottom){
  height:58px !important;
  transition: height 0.2s ease-in;
}

.tabulator-row-height-10 .tabulator-row:not(.tabulator-calcs-bottom){
  height:210px !important;
  transition: height 0.2s ease-in;
}

.tabulator-row-height-10 .tabulator-row .tabulator-cell,
.tabulator-row-normal-half-height .tabulator-row .tabulator-cell,
.tabulator-row-double-height .tabulator-row .tabulator-cell,
.tabulator-row-triple-height .tabulator-row .tabulator-cell,
.tabulator-row-normal-height .tabulator-row .tabulator-cell  {
  height:100% !important;
}
.tabulator-row-normal-height .tabulator-row:not(.tabulator-calcs-bottom){
  height: var(--tabu-row-height) !important;
  transition: height 0.2s ease-out;
}



.tabulator-header {
  font-size: var(--font-xs);
  line-height: 2;
  background-color: var(--color-bg)!important;
  color: var(--color-tooltip) !important;
  font-weight:700!important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background-color: var(--color-purple-lighter);
}

.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
  border-right: var(--space-2xs) solid var(--color-border-light);
}

.tabulator-table
  > .tabulator-row
  > .EditCell.tabulator-frozen.tabulator-frozen-left {
  border: none;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 2px 70%, 96.3% 1px;
  background-position: right, bottom;
}

.tabulator-table
  > .tabulator-row
  > .UnedCell.tabulator-frozen.tabulator-frozen-left {
  border: none !important;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 2px 70%, 96.3% 1px;
  background-position: right, bottom;
}

.tabulator-table
  > .tabulator-row
  > .SldtCell.tabulator-frozen.tabulator-frozen-left {
  border: none !important;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 2px 70%, 96.3% 1px;
  background-position: right, bottom;
}

.tabulator-table
  > .tabulator-row
  > .CalcCell.tabulator-frozen.tabulator-frozen-left {
  border: none !important;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 2px 70%, 96.3% 1px;
  background-position: right, bottom;
}

.tabulator-table
  > .tabulator-row
  > .UnslCell.tabulator-frozen.tabulator-frozen-left {
  border: none !important;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 2px 70%, 96.3% 1px;
  background-position: right, bottom;
}

.tabulator-row.tabulator-selectable:hover {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text) !important;
}

.tabulator-row.tabulator-selected,
.tabulator-row.tabulator-selected > .tabulator-cell.UnedCell,
.tabulator-row.tabulator-selected > .tabulator-cell.SldtCell,
.tabulator-row.tabulator-selected > .tabulator-cell.CalcCell,
.tabulator-row.tabulator-selected > .tabulator-cell.UnslCell {
  background-color: var(--tabu-row-selected-color);
  color: var(--color-white);
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
  background: var(--color-white) !important;
  cursor: default !important;
}

.tabulator .tabulator-footer .tabulator-calcs-holder {
  border-bottom: none !important;
  border-top: none !important;
}

.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
  font-weight: 400;
}

.tabulator-row:hover > .tabulator-cell.NotChangeableRow {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text) !important;
  border-bottom: var(--space-2xs) solid var(--color-purple-light);
}

.tabulator-error-cell {
  border-style: solid !important;
  border-width: thin !important;
  border-color: red !important;
}

.tabulator-row.tabulator-selectable.DisabledRow:hover {
  background-color: var(--color-purple-light) !important;
}

.tabulator-row.tabulator-selected.DisabledRow {
  background-color: var(--color-purple-light) !important;
}

.tabulator-row.DisabledRow {
  background-color: var(--tabu-row-outline-color) !important;
}

/* change pagination position */
.tabulator-footer {
  text-align: left !important;
  color: var(--color-text);
  background: var(--color-white)!important;
  border-top:0!important;
}
.tabulator-paginator{
  margin-left: 0.3em;

}
.tabulator-col-sorter .tabulator-arrow{
  border-left: 4px solid transparent!important;
  border-right: 4px solid transparent!important;
}
.tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-bottom: 4px solid var(--color-border-darker)!important;
}
.tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-top: 4px solid var(--color-border-darker)!important;
}
.tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-bottom: 4px solid var(--color-border)!important;
}

.tabulator-header-filter input{
  padding: 0 4px!important;
  outline: none!important;
}
.tabulator-header-custome-filter-input{
  height: var(--tabu-custom-filter-height)!important;
  width: 55%;
  padding: 4px;
}
.tabulator-header-custome-filter-select{
  height: var(--tabu-custom-filter-height)!important;
  width: 45%;
  margin-right: 2px;
  background-color: var(--color-white);
}
.list-group-item{
  padding: var(--space-base);
}
.list-group-item.active {
  background-color: var(--color-purple-light);
  color: var(--color-white);
  border-color: var(--color-purple-light);
}

.tabulator .tabulator-header .holiday {
  background-color: var(--tabu-cell-highlight-orange-color) !important;
}

.tabulator-hidden-scrollbar-x::-webkit-scrollbar {
  height: 0px;
  width: var(--space-base);
}
.tabulator-hidden-scrollbar-x{
  -ms-overflow-style: none !important;
  -webkit-scrollbar: none !important;
  scrollbar-width: none !important;
}
.tabulator-hidden-scrollbar-y{
  overflow-y: hidden !important;
}
/* *-----------------------------------------------------------------------------------------* */
/* Sub Section ( 2 / 2 ) for UedCell
/* *-----------------------------------------------------------------------------------------* */
/* *--------------------------* */
/*	1. UnedCell
/* *--------------------------* */

.tabulator-cell.UnedCell {
  background-color: var(--tabu-cell-uneditable-color);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  color: var(--color-text);
  height:100%;
  min-height: var(--tabu-row-height);
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.UnedCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.UnedCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.UnedCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.UnedCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

/* FOR IMAGE UNEDITABLE CELL*/
.tabulator-cell.ImageCell {
  background-color: var(--tabu-cell-uneditable-color);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));

  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  /* 特定の数字以下は効かない */
}

/* *--------------------------* */
/* 2. EditCell
/* *--------------------------* */

.tabulator-cell.EditCell {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));

  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  height:100%;
  min-height: var(--tabu-row-height);
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.EditCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.EditCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.EditCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.EditCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

/* *--------------------------* */
/* 3. SlhdCell
/* *--------------------------* */

.tabulator-cell.SlhdCell {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));

  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  /* 特定の数字以下は効かない */
}

.tabulator-cell.SlhdCell.UnedCell {
  background-color: var(--tabu-cell-uneditable-color);
  pointer-events: none;
  background-image: linear-gradient(var(--color-border), var(--color-border)),
	linear-gradient(var(--color-border), var(--color-border)) !important;
  background-repeat: no-repeat !important;
  background-size: 0px 0%, 100% 0.8px !important;
  background-position: bottom !important;
}

.tabulator-footer .tabulator-cell.SlhdCell {
  background: none !important;
}

/*Arrow Design on Tabulator*/
.tabulator-footer .tabulator-cell.SlhdCell:after {
  display: none !important;
}

.tabulator-cell.SlhdCell:after {
  content: ' \2193' !important;
  right: 0 !important;
  margin-right: var(--space-lg) !important;
  position: absolute;
}

.tabulator-cell.SlhdCell.UnedCell:after {
  content: ' \2193' !important;
  right: 0 !important;
  margin-right: var(--space-lg) !important;
  position: absolute;
}

.tabulator-calcs-holder .tabulator-cell.SlhdCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.SlhdCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}

/* *--------------------------* */
/* 4. SlctCell
/* *--------------------------* */

.tabulator-cell.SlctCell {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  /* 特定の数字以下は効かない */
}

.tabulator-row:hover > .tabulator-cell.SlctCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.SlctCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.SlctCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

/* *--------------------------* */
/* 5. SldtCell
/* *--------------------------* */

.tabulator-cell.SldtCell {
  background-color: var(--tabu-cell-uneditable-color);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.SldtCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.SldtCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.SldtCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.SldtCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-cell.SldtCell.UnedCell {
  background-color: var(--tabu-cell-uneditable-color);
  pointer-events: none;
  background-image: linear-gradient(var(--color-border), var(--color-border)),
	linear-gradient(var(--color-border), var(--color-border)) !important;
  background-repeat: no-repeat !important;
  background-size: 0px 0%, 100% 0.8px !important;
  background-position: bottom !important;
}

/* *--------------------------* */
/* 6. CalcCell
/* *--------------------------* */

.tabulator-cell.CalcCell {
  background-color: var(--tabu-cell-uneditable-color);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));

  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.CalcCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.CalcCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.CalcCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.CalcCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15);
  color: var(--color-black);
  cursor: default !important;
}


/* *--------------------------* */
/* 7. UnslCell
/* *--------------------------* */

.tabulator-cell.UnslCell {
  background-color: var(--tabu-cell-unselectable-color)!important;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  height:100%;
  min-height: var(--tabu-row-height);
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.UnslCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.UnslCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.UnslCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.UnslCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

/* *--------------------------* */
/* 6. HldyCell　※(Only Use Calender)
/* *--------------------------* */

.tabulator-cell.HldyCell {
  background-color: var(--tabu-cell-highlight-orange-color);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: middle;
  /* 効いてない */
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color)),
	linear-gradient(var(--tabu-row-outline-color), var(--tabu-row-outline-color));
  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  color: var(--color-text);
  height:100%;
  min-height: var(--tabu-row-height);
  /* 特定の数字以下は効かない */
}

.tabulator-footer .tabulator-cell.HldyCell {
  background: none !important;
}

.tabulator-row:hover > .tabulator-cell.HldyCell {
  background: var(--tabu-row-hover-color) !important;
  color: var(--color-text);
}

.tabulator-calcs-holder .tabulator-cell.HldyCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-calcs-holder:hover .tabulator-cell.HldyCell {
  background-color: var(--color-white) !important;
  border-bottom: var(--space-2xs) solid rgba(34, 36, 38, 0.15) !important;
  color: var(--color-black);
  cursor: default !important;
}

.tabulator-row:last-child > .tabulator-cell {
  background-image: none !important;
}

.tabulator-edit-select-list{
  /* Restrict the height of the tabulator select dropdown to ensure the last row's dropdown fits within the page */
  max-height: 100px !important;
  font-size: var(--font-base) !important;
}

/* *--------------------------* */
/* for star half rating
/* *--------------------------* */
.tabu-half-star-rating-width{
  width: var(--star-rating-size);
}
.tabu-half-star-rating {
  display: inline-block;
  position: relative;
  margin-top: var(--space-base);
}
.tabu-half-star-rating img {
  width: var(--star-rating-size);
  opacity: 0;
  float: left;
  color: transparent;
}
.tabu-half-star-rating label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: pointer;
}
.tabu-half-star-rating label:last-child {
  position: static;
}

.tabu-half-star-rating label:nth-child(1) {
  z-index: 11;
}

.tabu-half-star-rating label:nth-child(2) {
  z-index: 10;
}

.tabu-half-star-rating label:nth-child(3) {
  z-index: 9;
}

.tabu-half-star-rating label:nth-child(4) {
  z-index: 8;
}

.tabu-half-star-rating label:nth-child(5) {
  z-index: 7;
}

.tabu-half-star-rating label:nth-child(6) {
  z-index: 6;
}

.tabu-half-star-rating label:nth-child(7) {
  z-index: 5;
}

.tabu-half-star-rating label:nth-child(8) {
  z-index: 4;
}

.tabu-half-star-rating label:nth-child(9) {
  z-index: 3;
}
.tabu-half-star-rating label:nth-child(10) {
  z-index: 2;
}
.tabu-half-star-rating label:nth-child(11) {
  z-index: 1;
}
.tabu-half-star-rating label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.tabu-half-star-rating label .tabu-half-star-rating_icon {
  float: left;
  color: transparent;
}
.tabu-half-star-rating label .tabu-half-star-rating_icon_base {
  opacity: 1;
  float: left;
  color: transparent;
}
.tabu-half-star-rating label:last-child .tabu-half-star-rating_icon {
  opacity: 0;
}
.tabu-half-star-rating:not(:hover) label input:checked ~ .tabu-half-star-rating_icon,
.tabu-half-star-rating:hover label:hover input ~ .tabu-half-star-rating_icon {
  opacity: 1;
}
.tabu-half-star-rating label input:focus:not(:checked) ~ .tabu-half-star-rating_icon:last-child {
  opacity: 0;
}

.star_rating_header_filter{
  display:flex;
  align-items: center;
}
.star_rating_header_filter_type_select,
.tabu-custom-filter-dropdown-type-select{
  height: var(--tabu-custom-filter-height);
  width: 30%;
  background: var(--color-white);
}
.star_rating_header_filter_star_select,
.tabu-custom-filter-dropdown-value-select{
  height: var(--tabu-custom-filter-height);
  width: 70%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  cursor: pointer;
  border: 1px solid var(--color-border-darker);
  margin-top: 0;
  margin-left: 2px;
  background: var(--color-white);
}
.star_rating_header_filter_label{
  display: inline-flex;
  align-items: center;
}
/* *--------------------------* */
/* for marking
/* *--------------------------* */
.tabulator-cell.marking_cell {
  color: red !important;
  border-style: solid !important;
  border-width: thin !important;
  border-color: red !important;
}

/* *--------------------------* */
/* for progress bar
/* *--------------------------* */
.tabu-progress-container {
  width: 100%;
  height: 65%;
  overflow: hidden;
}

.tabu-progress-bar {
  height: 100%;
  background: var(--color-purple-light);
}


.tabulator .tabulator-header .tabulator-col{
  background: var(--color-bg)!important;
}
.tabulator .tabulator-tableHolder .tabulator-table{
  color: var(--color-text);
}
/* *--------------------------* */
/* Highlight cells
/* *--------------------------* */
/* Common use case: Under-scheduled assignment */
.RedBgCell {
  background-color: var(--color-danger-light) !important;
  background-image: linear-gradient(var(--color-danger), var(--color-danger)), linear-gradient(var(--color-danger), var(--color-danger))!important;
}
.tabulator .tabulator-header .tabulator-col.RedBgCell{
  background-color: var(--color-danger-light) !important;
  border-bottom: var(--space-xs) solid var(--color-danger)!important;
}
/* Common use case: Over-scheduled assignment */
.RedTextCell{
  color: var(--color-danger) !important;
}
.tabu_border{
  border: 1px solid rgba(34,36,38,.15);
}

.status_bar_wrapper{
  line-height: 0.8;
}
.button_status_bar_wrapper{
  display: flex;
  gap: var(--space-xs);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-base);
}

/* Multi-select header filter styles */
.tabu-multi-select-filter {
  width: 100% !important;
  background: white !important;
  visibility: hidden !important;
}

.tabu-multi-select-filter-wrapper {
  width: 100% !important;
  cursor: default !important;
}

.tabu-multi-select-filter-selection-box {
  max-height: 25px !important;
  min-height: unset !important;
  overflow-y: hidden !important;
  display: flex !important;
  align-items: center!important;
  flex-wrap: nowrap !important;
  border: solid 1px var(--color-border-darker) !important;
  border-radius: 2px !important;
}

.tabu-multi-select-filter-rendered {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
}

/* Date editor styles */
.tabu-date-editor {
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.tabu-date-editor-rendered {
  height: 100% !important;
}

/* Time select editor styles */
.tabu-time-select-editor {
  padding: 4px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.tabu-time-select-editor-hour {
  margin-right: 2px;
  text-align: center !important;
  width: 45% !important;
  height: 100% !important;
  border: 1px solid black !important;
}

.tabu-time-select-editor-label {
  margin-right: 2px !important;
  margin-left: 2px !important;
  width: 2% !important;
  height: 100% !important;
}

.tabu-time-select-editor-minute {
  margin-left: 2px !important;
  text-align: center !important;
  width: 45% !important;
  height: 100% !important;
  border: 1px solid black !important;
}

/* Textarea editor styles */
.tabu-textarea-editor {
  display: block !important;
  padding: 2px !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  resize: none !important;
}

/* Textarea formatter styles */
.tabu-textarea-formatter {
  white-space: pre-wrap !important;
  overflow-y: auto !important;
  align-items: flex-start !important;
}

/* Filter button styles */
.tabu-filter-btn-active {
  background-color: #f0f0f0 !important;
}

.tabu-filter-btn-inactive {
  background-color: #fff !important;
}

.tabu-reset-filter-hidden {
  display: none !important;
}

.tabu-reset-filter-visible {
  display: block !important;
}

.tabu-custom-editor{
  padding: 4px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}