::placeholder {
  color: var(--color-placeholder)!important;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--color-placeholder)!important;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--color-placeholder)!important;
}

label {
  display: inline-block;
  margin-bottom: 0px;
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-lighter);
  line-height: 1.5;
}

label.is-invalid {
  color: var(--color-error-light);
}

.optional-input-label{
  color: var(--color-pink);
  margin-left: var(--space-xs);
}

.form-control-sm {
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  border-radius: 0;
  height: auto !important;
  border: none !important;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.form-control {
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  border-radius: var(--radius-xs);
  border: solid 1px var(--color-border-dark) !important;
  box-sizing: border-box;
  vertical-align: middle;
  resize: none;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-size: 0px 0%, 98% 1px;
  background-position: bottom;
  min-height: var(--input-height);
  height: auto !important;
  font-size: var(--font-base);
  padding: var(--input-padding);
}


.form-control:focus {
  color: var(--color-text-dark);
  background-color: var(--color-white);
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.form-control.is-invalid {
  border: 1px solid var(--color-danger) !important;
}
.form-control:disabled{
  background: var(--tabu-cell-uneditable-color);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xs);
  pointer-events: none;
  color: var(--color-text);
}
.form-control.SldtItem{
  background: var(--tabu-cell-uneditable-color)!important;
  border: 1px solid var(--color-border-dark)!important;
  border-radius: var(--radius-xs)!important;
  pointer-events: none!important;
  color: var(--color-text) !important;
}

/* *-----------------------------------------------------------------------------------------* */
/* Sub section ( 4 / 4 ) for DATEPICKER
/* *-----------------------------------------------------------------------------------------* */
.datepicker-months .datepicker-switch,
.datepicker-years .datepicker-switch,
.datepicker-months .table-condensed,
.datepicker-years .table-condensed {
  width: var(--datepicker-container-width) !important;
}

.datepicker table tr td span {
  width: 31.333% !important;  /* 3列レイアウト: (100% - 2% margin) / 3 */
  height: var(--datepicker-height) !important;
  line-height: var(--datepicker-height) !important;
  margin: 1% !important;
  font-size: var(--font-base) !important;
}

.datepicker table tr td.day {
  padding: var(--space-lg) !important;
  font-size: var(--font-base) !important;
}

/* 当月の日付を太字で表示（前月・次月以外） */
.datepicker table tr td.day:not(.old):not(.new) {
  font-weight: 900 !important;
}

.datepicker table tr td.day:not(.old):not(.new):not(.active) {
  color: var(--color-text) !important;
}

.datepicker-container {
  max-width: 10%;
  margin-left: auto;
  margin-right: 0;
}
/* *-----------------------------------------------------------------------------------------* */
/* Sub section ( 4 / 4 ) for TEXTAREA
/* *-----------------------------------------------------------------------------------------* */
.custom_textarea {
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  border-radius: var(--radius-xs) !important;
  border: none;
  box-sizing: border-box;
  vertical-align: middle;
  resize: none;

  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%, 98% 1px;
  background-position: bottom;
  min-height: 43px;
  max-height: 500px;
  height: 200px;
}
/* PHONG- this class add blue border to all border of input item-> not neccesary? */
.custom_form {
  background: var(--color-white);
  color: var(--color-text) !important;
  outline: none;
  border-radius: var(--space-sm);
  height: auto !important;
  border: var(--space-2xs) solid var(--tabu-row-outline-color) !important;
}
select.form-control.form-control-sm:not(.login_input){
  max-height: var(--input-height);
}

/* half-star-rating */
.half-star-rating {
  display: inline-block;
  position: relative;
  margin-left: calc(-1*(var(--star-rating-size-xl) + 2px));
}

@media (max-width: 1500px) {
  .half-star-rating img {
    width: var(--star-rating-size-lg) !important;
  }
  .half-star-rating {
    margin-left: calc(-1*(var(--star-rating-size-lg) + 2px));
  }
}

@media (max-width: 1300px) and (min-width: 1000px){
  .half-star-rating img {
    width: var(--star-rating-size) !important;
  }
  .half-star-rating {
    margin-left: calc(-1*(var(--star-rating-size) + 2px));
  }
}

.half-star-rating img {
  width: var(--star-rating-size-xl);
  opacity: 0;
  float: left;
  color: transparent;
}
.half-star-rating label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.half-star-rating label:last-child {
  position: static;
}

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

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

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

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

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

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

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

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

.half-star-rating label:nth-child(9) {
  z-index: 3;
}
.half-star-rating label:nth-child(10) {
  z-index: 2;
}
.half-star-rating label:nth-child(11) {
  z-index: 1;
}
.half-star-rating label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.half-star-rating label .half-star-rating_icon_zero {
  float: left;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}
.half-star-rating label .half-star-rating_icon {
  float: left;
  color: transparent;
  cursor: pointer;
}
.half-star-rating label .half-star-rating_icon_base {
  opacity: 1;
  float: left;
  color: transparent;
}
.half-star-rating label:last-child .half-star-rating_icon {
  opacity: 0;
}

.half-star-rating label input:disabled ~ .half-star-rating_icon {
  cursor: default;
}

.half-star-rating:not(:hover) label input:checked ~ .half-star-rating_icon {
  opacity: 1;
}

.half-star-rating:hover label:hover input:not([disabled]) ~ .half-star-rating_icon {
  opacity: 1;
}

.half-star-rating:hover label input:checked:disabled ~ .half-star-rating_icon {
  opacity: 1;
}

.half-star-rating label input:focus:not(:checked) ~ .half-star-rating_icon:last-child {
  opacity: 0;
}
/* cancel_checkbox */
.cancel_checkbox {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 0px 5px;
}
.cancel_checkbox-Input {
  margin: 0;
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
}

.cancel_checkbox-Input + .cancel_checkbox-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/x_box_unchecked.png") no-repeat center;
  background-size: contain;
}

.cancel_checkbox-Input:disabled + .cancel_checkbox-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/x_box_unchecked_disable.png") no-repeat center;
  background-size: contain;
}

.cancel_checkbox-Input:checked + .cancel_checkbox-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/x_box_checked.png") no-repeat center;
  background-size: contain;
}

.cancel_checkbox-Input:checked:disabled + .cancel_checkbox-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/x_box_checked_disable.png") no-repeat center;
  background-size: contain;
}
.cancel_checkbox-DummyInput {
  position: relative;
  top: calc(-1.5 * var(--font-base));
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--space-base);
  transition: filter var(--transition-base) ease;
  filter: brightness(1);
}

.cancel_checkbox-Input:disabled + .cancel_checkbox-DummyInput {
  cursor: default;
}

.cancel_checkbox-Input:not([disabled]) + .cancel_checkbox-DummyInput:hover {
  filter: brightness(0.9);
}



select:disabled {
  background: var(--tabu-cell-uneditable-color);
  border: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  color: var(--color-text) !important;
  cursor: context-menu !important;
}

option.deleted_option {
  color: red;
}

.deleted_item_select {
  color: red !important;
}
.textInput:after {
  content: ' \2193' !important;
  right: 0 !important;
  margin-right: var(--space-lg) !important;
  position: absolute;
  margin-top: calc(-1 * (var(--input-height) + 4px)) !important;
  font-weight: bold;
}

/* MULTIPLE SELECT INPUT ITEMS DESIGN */
.select2-container--default .select2-selection--single {
  border-color: var(--color-border-dark) !important;
}

.select2-selection__choice {
  padding: 6px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--radius-xs) !important;
  background-color: var(--color-yellow) !important;
  color: var(--color-text) !important;
  margin-right: var(--space-sm) !important;
  margin-top: var(--space-sm) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear{
  margin-top: var(--input-padding) !important;
  margin-right: 0 !important;
}
.select2-selection__choice__remove {
  color: var(--color-text) !important;
  float: none !important;
  margin: 0 4px 0px 0px !important;
}

.select2-selection__choice__remove:hover {
  background-color: transparent !important;
}

.select2-container {
  border-radius: var(--radius-xs) !important;
  width: var(--space-5xl);
  font-size: var(--font-base) !important;
}

.select2-selection--multiple {
  border-radius: var(--radius-xs) !important;
  outline: none !important;
}

.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  color: var(--color-text);
  background-color: var(--color-white);
  border-color: var(--color-border-dark) !important;
  box-shadow: 0 0 0.2rem var(--color-info);
}

.select2-custom.select2-container--focus .select2-selection--multiple {
  color: var(--color-text);
  background-color: var(--color-white);
  border-color: var(--color-info-light) !important;
  box-shadow: 0 0 0.2rem var(--color-info);
}

.select2-container--default .select2-selection--multiple {
  line-height: 1;
  min-height: var(--input-height) !important;
  border:1px solid var(--color-border-dark);
}
.text-sm .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search.select2-search--inline .select2-search__field, select.form-control-sm~.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search.select2-search--inline .select2-search__field{
  margin-top: var(--input-padding) !important;
}

/*when modal is disabled*/
.select2-container--default.select2-container--disabled
  .select2-selection--multiple {
  background-color: var(--tabu-cell-uneditable-color) !important;
  box-shadow: none !important;
  background-image: none !important;
  border:1px solid var(--color-border-dark)
}

.select2-container--default .select2-results__option[aria-disabled='true'] {
  display: none;
}

.select2-container--default .is-invalid {
  border: 1px solid red !important;
}

.select2-selection__rendered{
  padding: 0px var(--input-padding) var(--input-padding) !important;
  margin-top: 0px !important;
}

.textarea:read-only {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text) !important;
}
textarea:read-only:focus {
  color: var(--color-text);
  background-color: var(--color-white);
  outline: 0;
  box-shadow: none;
}

/* *--------------------------* */
/*	Email Address
/* *--------------------------* */
.email_address_container {
  list-style-type: none;
}
.email_address_item {
  width: fit-content;
  background-color: rgba(255, 180, 72, 0.9) !important;
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  float: left;
  margin-right: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.email_address_input_item {
  float: left;
}
.email_address_input {
  outline: none !important;
  border: none !important;
  width: 100% !important;
}
.email_address_item.is-invalid,
.email_address_item.is-invalid > span {
  background-color: var(--color-error-light);
  color: var(--color-white);
}


/* *--------------------------* */
/*	1. Radio and Checkbox
/* *--------------------------* */

/* チェックボックス、ラジオボタンの巨大化 カスタムコントロールには効かない -  Check box and radio button */
input[type='checkbox'] {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--color-border-dark) !important;
  border-radius: var(--radius-2xs);
  vertical-align: middle;
  left: 50%;
  accent-color:var(--color-purple);
  cursor: pointer;
}
input[type='checkbox'].red-mark {
  accent-color: var(--color-danger);
}

input[type='radio'] {
  width: var(--space-xl);
  height: var(--space-xl);
  vertical-align: middle;
}

input[type='text']:disabled {
  background: var(--tabu-cell-uneditable-color);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xs);
  pointer-events: none;
  color: var(--color-text)!important;
}

input[type='number']:disabled {
  background: var(--tabu-cell-uneditable-color);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xs);
  pointer-events: none;
  color: var(--color-text)!important;
  cursor: context-menu;
}

input[type='number']:disabled {
  -moz-appearance: textfield;
}

.form-check-label-sm {
  background: inherit!important;
  color: var(--color-text-lighter)!important;
  font-size: var(--font-base)!important;
}

.form-check-label-lg {
  background: inherit!important;
  color: var(--color-text)!important;
  font-size: var(--font-base)!important;
}

/* for switch_radio_button */
.switch_radio_button{
  flex-flow: row;
  display: flex;
  /* flex-wrap: wrap; */
}
.switch_radio_button input{
  display: none;
}

@media (min-width: 1500px) {
  .switch_radio_button label{
    width: 95px !important;
  }
}

@media (max-width: 1500px) {
  .switch_radio_button label{
    width: 85px !important;
  }
}

@media (max-width: 1300px) and (min-width: 1000px){
  .switch_radio_button label{
    width: fit-content !important;
    max-width: 75px !important;

  }
}



.switch_radio_button label{
  display: block;
  float: left;
  cursor: pointer;
  width: fit-content;
  font-size: var(--font-base);
  margin: 0;
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--color-border-dark);
  /* border-right: 0px; */
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
  line-height: 1;
  transition: var(--transition-fast);
  font-size: var(--font-base) !important;
  font-weight: 400 !important;
}

.switch_radio_button label:first-of-type{
  border-radius: var(--space-sm) 0 0 var(--space-sm);
}

.switch_radio_button label:last-of-type{
  border-right: 1px solid var(--color-border-dark);
  border-radius: 0 var(--space-sm) var(--space-sm) 0;
}

.switch_radio_button input[type="radio"]:checked + label {
  background-color: var(--color-info-light);
  border: var(--space-2xs) solid var(--color-info);
  border-right: 0px;
  font-weight: 700 !important;
  color: var(--color-white);
}

.switch_radio_button input[type="radio"]:checked + label:last-of-type{
  border-right: var(--space-2xs) solid var(--color-info);
}

.switch_radio_button input[type="radio"]:disabled + label {
  cursor: default;
  background: var(--color-bg);
  color: var(--color-border-dark);
}
.switch_radio_button input[type="radio"]:disabled:checked + label {
  background-color: var(--color-disabled);
  border: 1px solid var(--color-border-dark);
  border-right: 0px;
  color: var(--color-white);
}
.report_flg_checkbox {
  display: none;
}

.checkbox_switch {
  align-items: center;
  background-color: var(--color-switch-background);
  border-radius: 500px;
  cursor: pointer;
  display: flex;
  height: 25px;
  justify-content: space-between;
  padding: 0 var(--space-base);
  position: relative;
  user-select: none;
  width: 50px;
  /* margin: auto; */
}

.report_flg_checkbox:checked ~ .checkbox_switch {

  background-color: var(--color-info-light);

}

.report_flg_checkbox:not(:checked) ~ .checkbox_switch {
  background-color: var(--color-switch-background);

}

.checkbox_switch__left,
.checkbox_switch__right {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.report_flg_checkbox:checked ~ .checkbox_switch .checkbox_switch__left {
  visibility: hidden;
}

.report_flg_checkbox:not(:checked) ~ .checkbox_switch .checkbox_switch__right {
  visibility: hidden;
}

.checkbox_switch__circle {
  height: 30px;
  padding: var(--space-sm);
  position: absolute;
  transition: all var(--transition-fast) linear;
  width: 30px;
}

.report_flg_checkbox:checked ~ .checkbox_switch .checkbox_switch__circle {
  left: calc(100% - 28px);
  right: 0;

}

.report_flg_checkbox:not(:checked) ~ .checkbox_switch .checkbox_switch__circle {
  left: 0;
  right: calc(100% - 28px);

}

.checkbox_switch__circle-inner {
  background-color: var(--color-white);
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
  border: var(--space-2xs) solid var(--color-text-lighter);
}

.report_flg_checkbox:checked ~ .checkbox_switch .checkbox_switch__circle .checkbox_switch__circle-inner  {
  border: var(--space-2xs) solid var(--color-info);

}

.report_flg_checkbox:not(:checked) ~ .checkbox_switch .checkbox_switch__circle .checkbox_switch__circle-inner {
  border: var(--space-2xs) solid var(--color-text-lighter);


}

.horizontal_check_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: var(--space-2xl);
  align-items: center;
}

.text_div {
  min-height: 25px;
  white-space: pre-wrap;
  overflow-y: auto;
  padding: var(--space-2xs) !important;
  background-color: var(--tabu-cell-uneditable-color);
  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;
  color: var(--color-text) !important;
}
.form-group  .form-label-custom {
  display: inline-block;
  margin-bottom: var(--space-2xs) !important;
  font-size: var(--font-4xl) !important;
  font-weight: 700 !important;
  color: var(--color-text-lighter);

}
.radio-label {
  font-weight: 400!important;
}


select.form-control option[disabled] {
  display: none;
}

/* ------------------switch----------------------- */

.toggle {
  cursor: pointer;
  display: inline-block;
}
.toggle.disabled {
  cursor: default;
  opacity:0.5;
}

.toggle-switch {
  display: inline-block;
  background: var(--color-switch-background);
  border-radius: 1rem;
  width: var(--toggle-width);
  height: var(--toggle-height);
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
  margin-right: var(--space-base);
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-bg) 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: var(--toggle-handle-size);
  height: var(--toggle-handle-size);
  position: absolute;
  top: calc((var(--toggle-height) - var(--toggle-handle-size)) / 2);
  left: calc((var(--toggle-height) - var(--toggle-handle-size)) / 2);
  transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 100%);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
  background: var(--color-purple);
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: calc(var(--toggle-width) - var(--toggle-handle-size) - ((var(--toggle-height) - var(--toggle-handle-size)) / 2));
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.view-mode-textbox,
.SldtItem.view-mode-textbox {
  background-color: var(--color-white) !important;
  border:none!important;
  cursor:default;
  background-image: linear-gradient(var(--color-border-dark), var(--color-border-dark)),
  linear-gradient(var(--color-border-dark), var(--color-border-dark)) !important;
  background-repeat: no-repeat !important;
  background-size: 0px 0%, 100% 0.8px !important;
  background-position: bottom !important;
  color: var(--color-text) !important;
}

.form_display_period input,
.form_display_period select{
  background-color: var(--color-white)!important;
  border:none!important;
  text-align: center;
}
.form_display_period input{
  width: 80px;
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--tabu-cell-uneditable-color);
  cursor: default;
}
.form-control[readonly]:focus {
  background: var(--tabu-cell-uneditable-color);
}

/* --------------delete_flag / active status selection -----------*/
.active_select::before {
  content: url('../../images/active_icon.svg');
  margin-right:var(--space-sm);
  padding-top:var(--space-xs);
}
.inactive_select::before {
  content: url('../../images/inactive_icon.svg');
  margin-right:var(--space-sm);
  padding-top:var(--space-xs);
}

.select_with_check_icon.view-mode-textbox:disabled,
.select_with_check_icon.SldtItem.view-mode-textbox:disabled    {
  background-color: var(--color-white) !important;
  border:none!important;
  pointer-events: none!important;
  background:
  linear-gradient(var(--color-border-dark), var(--color-border-dark)) bottom / 0px 0% no-repeat,
  linear-gradient(var(--color-border-dark), var(--color-border-dark)) bottom / 100% 0.8px no-repeat,
  url('../../images/active_icon.svg') 4% 49% / var(--icon-size-xs) var(--icon-size-xs) no-repeat !important;
  color: var(--color-text) !important;
  padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));
}
.select_with_minus_icon.view-mode-textbox:disabled,
.select_with_minus_icon.SldtItem.view-mode-textbox:disabled   {
  background-color: var(--color-white) !important;
  border:none!important;
  pointer-events: none!important;
  background:
  linear-gradient(var(--color-border-dark), var(--color-border-dark)) bottom / 0px 0% no-repeat,
  linear-gradient(var(--color-border-dark), var(--color-border-dark)) bottom / 100% 1px no-repeat,
  url('../../images/inactive_icon.svg') 4% 49% / var(--icon-size-xs) var(--icon-size-xs) no-repeat !important;

  color: var(--color-text) !important;
  padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));
}

.select_with_check_icon{
   color: var(--color-text) !important;
   background: no-repeat  4% 54%/var(--icon-size-xs) var(--icon-size-xs) url('../../images/active_icon.svg') !important;
   padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));

}
.select_with_minus_icon{
  color: var(--color-text) !important;
  background: no-repeat  4% 54%/var(--icon-size-xs) var(--icon-size-xs) url('../../images/inactive_icon.svg') !important;
  padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));

}
.select_with_check_icon:disabled,
.select_with_check_icon .SldtItem:disabled{
  background: no-repeat  4% 50%/var(--icon-size-xs) var(--icon-size-xs) url('../../images/active_icon.svg'), var(--tabu-cell-uneditable-color) !important;
  border: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  color: var(--color-text) !important;
  cursor: context-menu !important;
  padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));
}
.select_with_minus_icon:disabled,
.select_with_minus_icon.SldtItem:disabled{
  background: no-repeat  4% 50%/var(--icon-size-xs) var(--icon-size-xs) url('../../images/inactive_icon.svg'), var(--tabu-cell-uneditable-color) !important;
  border: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  color: var(--color-text) !important;
  cursor: context-menu !important;
  padding-left: calc(var(--icon-size-xs) + var(--space-base) + var(--space-sm));
}


/* *********************************************************************************************************************************************************************** */
/* RANGE SLIDER STYLING                                                                                                                                                   */
/* *********************************************************************************************************************************************************************** */

/* Base range input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    height: var(--space-sm);
    background: var(--color-border-light);
    border-radius: var(--space-xs);
    outline: none;
    transition: all var(--transition-base) ease;
    cursor: pointer;
}

input[type="range"]:hover {
    background: var(--color-border);
}

input[type="range"]:focus {
    box-shadow: 0 0 0 var(--space-2xs) rgba(0, 123, 255, 0.25);
}

input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--color-bg);
}

/* WebKit browsers (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--space-lg);
    height: var(--space-lg);
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 0.5px solid var(--color-white);
    box-shadow: 0 var(--space-xs) var(--space-sm) rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--color-primary-dark);
    transform: scale(1.1);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--color-border-dark);
    cursor: not-allowed;
    transform: none;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    width: var(--space-lg);
    height: var(--space-lg);
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 0.5px solid var(--color-white);
    box-shadow: 0 var(--space-xs) var(--space-sm) rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease;
}

input[type="range"]:hover::-moz-range-thumb {
    background: var(--color-primary-dark);
    transform: scale(1.1);
}

input[type="range"]:disabled::-moz-range-thumb {
    background: var(--color-border-dark);
    cursor: not-allowed;
    transform: none;
}

input[type="range"]::-moz-range-track {
    height: var(--space-sm);
    background: var(--color-border-light);
    border-radius: var(--space-xs);
    border: none;
}

input[type="range"]:hover::-moz-range-track {
    background: var(--color-border);
}

input[type="range"]:disabled::-moz-range-track {
    background: var(--color-bg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    input[type="range"] {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    input[type="range"] {
        max-width: 200px;
    }
}